Mouseover

Status
Niet open voor verdere reacties.
B

budah

Gebruiker
Lid geworden
31 jan 2005
Berichten
58
Hallo,

Ik heb een site gemaakt en nu wil ik mijn foto´s erop zetten met thumbnails die dan met behulp van een mouseover te zien zijn. Nu lukt het me alleen met 1 foto de rest ziet hij niet kan iemand mij aub. op weg helpen. Ik heb de code in mijn pagina geladen en dan werkt hij maar meerdere foto´s lukt me dus niet.

Bedankt alvast voor het reageren

Budah
 
Heb je een link naar je pagina of kun je de code hier tussen [*php] [*/php] tags zetten? (zonder de *-tjes in de tags)

Anders is natuurlijk niet te zien waar het fout gaat. :)

De makkelijkste manier is een functie te schrijven voor het weergeven van een grote foto, iets als
PHP: 
<img src="t_foto1.jpg" onmouseover="show(this)">
De functie show() kijkt dan welke thumbnail de functie aanroept en geeft dan de grote foto weer (foto1.jpg). :)


Vr.Gr. Egel.
 
Hoi Egel

Bedankt voor het reageren. Wat ik doe is de foto laden in een mouseover generator, de code die ik dan krijg zet ik in mijn html bestand, laad ik deze pagina op dan werkt het gewoon zoals het hoort maar meerdere fotos lukt mij niet. Wat ik heb geprobeerd is de code te herhalen met andere fotos, de fotos zijn dan wel te zien maar werken niet.
Ik ben een leek op dit gebied maar wil het graag leren vandaar mijn vraag

Budah
 
Budah,

Je hebt nog steeds geen linkje/post van je script. Maar ik denk dat voor wat jij wilt, je helemaal geen javascrpit nodig hebt.

Voeg het volgende toe aan je <head>:
HTML: 
<style type="text/css">
	a.thumb-trigger img       { display: none; }
	a.thumb-trigger:hover img { display: block; }
</style>

En om nu een thumb te maken doe je in de <body>:
HTML: 
<a href="#" class="thumb-trigger">
	Plaatje nummer 1
	<img src="http://fluxility.com/resources/images/woutcard.png" alt="Mijn kaartje" />
</a>

Veel variaties op mogelijk. Is dit ongeveer de richting die je wilt hebben?

Wout
 
@ w.sickman,

bedankt voor je info, ik ga het proberen hier even wat toegevoegde info ik heb dus alles klaar.Thumbnails gemaakt site gemaakt, ik voer dus de thumnails en de fotos en de html en zo ga ik het proberen. Tips zijn altijd welkom alvast bedankt weer voor het reageren
 
Dit is een script zoals ik in m'n eerdere reactie bedoelde:
PHP: 
<script type="text/javascript">
 function show(x) {
  document.getElementById('photo').src = x.src.split('/t_')[1];
  };
</script>

<img id="photo" src="foto_01.jpg">

<img src="t_foto_01.jpg" onmouseover="show(this)">
<img src="t_foto_02.jpg" onmouseover="show(this)">
<img src="t_foto_03.jpg" onmouseover="show(this)">
<img src="t_foto_04.jpg" onmouseover="show(this)">
<img src="t_foto_05.jpg" onmouseover="show(this)">
<img src="t_foto_06.jpg" onmouseover="show(this)">
:)


Vr.Gr. Egel.
 
Wat w.sickman heeft gepost zoek ik al een tijdje,geen script nodig dus.
Hier ben ik heel blij mee,thanks:thumb:
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan