[HTML/CSS/JS]Plaatjes pas tonen en laden op a:hover

[sjaakaq]

Ik heb op http://www.mijnogen.net/pivot/templates/review_template.html een pagina met een grote lijst CD reviews. Om deze wat duidelijker te maken is het natuurlijk handig om de cover erbij te zien. Probleem is dan dat een gebruiker meteen 44 of meer plaatjes moet downloaden, en dat mijn bandwith naar de knoppen gaat

Wat ik dus graag zou willen is een manier waarop het de CD cover getoond wordt zodra ik over een titel heen hover.

1) Ik heb uiteraard heel veel scripts en CSS gezien waarbij je bijv. als je over een UL of OL hovert een plaatje te zien krijgt, maar dat werkt alleen fatsoenlijk als je een vast plaatje hebt. Ik heb dus zoveel plaatjes als CD reviews.
2) Je kan ook iets doen zodat ie de plaatje alleen showt zodar je hovert (met JS), maar het probleem is dat IE dan toch alle plaatjes downloadt, ook al zijn ze hidden...

Verder zou het fijn zijn als de pagina niet versprong als er een plaatje toont, ideaal zou zijn een soort "tooltip" met het plaatje erin.

Wie heeft hulp?

[sjaakaq]

Ik heb 't al opgelost

Cascading Stylesheet:

a{
    position:relative; /*this is the key*/
    z-index:24; 
}

a:hover{z-index:25; background-color:#fff}

a span{display: none}

a:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:0px; left:480px;
    border:0px;
    color:#000;
    text-align: center}

HTML:

<a href="http://www.adres.nl">Beschrijving link <span>[img]"plaatje.jpg"[/img]</span></a>

Werkt perfect!

Edit: Nadeel is wel dat alles tóch gedownload wordt (in IE that is), maar het wordt dan weer gelukkig wel gecached...

[ Voor 25% gewijzigd door sjaakaq op 07-03-2005 22:39 ]

[djluc]

nu worden alle afbeeldingen toch meteen geladen?

[Reinier]

djluc schreef op maandag 07 maart 2005 @ 22:30:
nu worden alle afbeeldingen toch meteen geladen?

Wilde ik ook zeggen. Het ziet er nu erg leuk uit, maar het levert niet minder dataverkeer op.

[sjaakaq]

idd, zie edit. Echter volgens mijn "research" is het in IE gewoon onmogelijk afbeeldingen te laten "verschijnen" zonder ze eerst te laden (behalve met Flash dan oid)

[CrashOne]

Of met XmlHttp.

[Genoil]

leokennis schreef op maandag 07 maart 2005 @ 22:40:
idd, zie edit. Echter volgens mijn "research" is het in IE gewoon onmogelijk afbeeldingen te laten "verschijnen" zonder ze eerst te laden (behalve met Flash dan oid)

mwoach zolang je IE maar niet verteld waar het plaatje te halen valt.

code:

[img]'blaat.gif'"/[/img]

of mis ik nou iets

[Rapzar]

http://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm

[faabman]

je kunt ook een eigen attribute toevoegen...

zoiets als:

<a href="" imageSrc="" />

waarna je met JS / DOM de src uitleest en een nieuwe afbeelding aanmaakt en weergeeft...

edit:
overigens loop je dan weer de kans dat je bezoekers lang moeten wachten voordat de afbeelding zichtbaar is....

[ Voor 32% gewijzigd door faabman op 08-03-2005 00:39 ]

[Res-q]

Ik heb op een site het volgende idee gebruikt:

HTML:

<a href="#" onmouseover="changetext(1)">Test 1</a>
<a href="#" onmouseover="changetext(2)">Test 2</a>

<div id="variabeletext">
  Hier komt de tekst die je verandert, dus wordt door javaScript
  veranderd in plaatje met tekst
</div>

en daar een javascriptje achter gehangen:

JavaScript:

function changetext(tekst)
  { 
    messages=new Array()
      messages[0] = '[img]"plaatje1.jpg"><br[/img]<br />bijschrijft enzo'
      messages[1] = '[img]"plaatje1.jpg"><br[/img]<br />bijschrijft enzo'

    document.getElementById('variabeletext').innerHTML = messages[tekst]
  }

Werkt perfect, en volgens mij worden op deze manier de plaatjes niet eerst geladen

[ Voor 134% gewijzigd door Res-q op 08-03-2005 08:22 ]

[sjaakaq]

Rapzar schreef op maandag 07 maart 2005 @ 23:53:
http://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm

Nadeel met deze methode is dat je alles op 2 plekken moet bijwerken; in de <script> sectie en in de link zelf, wat nogal een gedoe is Dank voor de tip, maar dan prefereer ik mijn methode toch