Archief - JS: overlib

Ik werk met een javascript: "overlib.js" dat ervoor zorgt dat er een soort tooltip verschijnt wanneer men bijvoorbeeld met de cursor over een link of afbeelding beweegt.

In mijn webpagina heb ik een tekening die een andere tekening met deze functie moet laten zien, als een soort tooltip. Ik heb hiervoor een layer gebruikt met daarin nog een img met het pad naar een tekening.
Mijn code ziet er als volgt uit:

<img src="images/foto.gif" onMouseOver="return overlib('<div><img src='images/foto_overlib.gif'></div>');void(0);" onMouseOut=" return nd();" border="0" width="122" height="130">

Hierop krijg ik de foutmelding: "fout: ')' verwacht.
De fout ligt waarschijnlijk bij die enkele quotes, kan mij iemand helpen om dit fatsoenlijk te schrijven?

Sjeng zei:

<img src="images/foto.gif" onMouseOver="return overlib('<div><img src='images/foto_overlib.gif'></div>');void(0);" onMouseOut=" return nd();" border="0" width="122" height="130">

Klik om te vergroten...

dat zou moeten gaan

Dat heb ik ook al geprobeerd, maar werkt niet

Ik heb dat ook al tussen backslashes gezet zoals dit:
<img src="images/foto.gif" onMouseOver="return overlib('<div><img src=\"images/foto_overlib.gif\"></div>');void(0);" onMouseOut=" return nd();" border="0" width="122" height="130">

werkt ook niet...
Op internet vind ik niet veel terug omtrent dit soort tooltips, wel met gewoon tekst, maar dat is niet de bedoeling.

even googlen en de website van de ontwikkelaars lezen kan al veel helpen:

zie: http://www.bosrup.com/web/overlib/?Features

en wat lezen we daar wanneer ge zelf html wil invoegen:

* Taking full control over the html

overlib('<b><font color=\'#FF6666\' face=\'Courier,Verdana,Arial,Helvetica\'>No border or image!</font></b>', FULLHTML, FOLLOWMOUSE)

Klik om te vergroten...

Ik heb site al 100X nagekeken, maar ik heb het anders opgelost met deze functie:

function rollOver(foto){
return overlib("<div align='center'><img src='" + foto + "'></div>");
}

De functie wordt dan opgeroepen in html en returnt dan weer op zijn beurt de functie overlib:

<img src="images/foto.gif" onMouseOver="return rollOver('http://www.ergens.com/foto.jpg');void(0);" onMouseOut=" return nd();" border="0" width="122" height="130">

En dit blijkt te werken.

tjonge tjonge dan kan jij toch geen engels:

ge kunt bij het aanroepen van een overlib.js functie extra parameters meegeven (commands)
zie: http://www.bosrup.com/web/overlib/?Command_Reference

en als ge een kaderke wilt met custom html in dan is er zoiets als:

FULLHTML
Allows you to control the html over a BACKGROUND picture completely. The html code is expected in "text". A number whose default is off (0).
Variable: ol_fullhtml.

overlib(<i>myTextHere</i>, FULLHTML, ...)
// where <i>myTextHere</i> the HTML markup for your popup

Klik om te vergroten...

met andere woorden: RTFM :doh:

dit ziet er wel een goede library uit, ik ga die ook beginnen gebruiken voor mijn extra/intranet toepassingen

Wat denk je dat ik allemaal geprobeerd heb!!?? Ja dit ook! :ironic:
Waarschijnlijk heb ik toen ergens een klein foutje geschreven dat ik nooit gevonden heb, maar de oplossing die ik nu heb werkt perfect.