Mouseover, plaatje(s) veranderen

Status
Niet open voor verdere reacties.
J

justinos

Gebruiker
Lid geworden
12 nov 2004
Berichten
199
Hallo allemaal,

Ik zou graag het volgende willen:

Op mijn site heb ik 4 plaatjes naast elkaar, dus laten we zeggen gif1, gif2, gif3 en gif4. Als ik met mijn muis over plaatje 1 ga (dus gif1) dan moet deze veranderen in gif1.1. Ga ik met mijn muis over plaatje 2 (dus gif2), dan moeten zowel gif1 als gif2 veranderen in gif1.1 en gif2.2.

Dus: met je muis over gif3, dan moeten alle drie de gifjes veranderen. Gif1 in gif1.1, gif2 in gif2.2 en gif3 in gif3.3.

Is dit mogelijk en zo ja, kan iemand mij uitleg geven of mij doorsturen naar een website met info? Via google heb ik al wat geprobeerd maar dit is lastig om op te zoeken.

Alvast bedankt!!
 
jeroendenoot zei:
Zo moeilijk is dat toch niet om te zoeken? Er staan duizenden voorbeelden op internet (als het er niet meer zijn). Er zijn ook generators voor, bijvoorbeeld deze: http://www.wswise.com/index.php?sectionid=68
Klik om te vergroten...

Dat is maar voor één plaatje, dus als je met je muis over plaatje 1 gaat dat dan alleen plaatje 1 veranderd in 1.1 bijvoorbeeld. Ik wil echter dat als je met me muis over plaatje 3 gaat, dat dan zowel plaatje 1, als 2, als 3 veranderen in 1.1, 2.1 en 3.2. Ik hoop dat je snapt wat ik bedoel
 
Oh sorry, ik had je vraag niet goed gelezen.. :o

Hier het script (ik hoop dat ie werkt, niet getest):

HTML: 
<script type="text/html">
<!--

function rollover(id) {
	for (var i = 1; i <= id; i++) document.getElementById('gif' + id).src = 'gif' + id + '.' + id + '.gif';
}

function rollout(id) {
	for (var i = 1; i <= id; i++) document.getElementById('gif' + id).src = 'gif' + id + '.gif';
}

//-->
</script>

<img src="gif1.gif" id="gif1" onmouseover="rollover(1)" onmouseout="rollout(1)" />
<img src="gif2.gif" id="gif2" onmouseover="rollover(2)" onmouseout="rollout(2)" />
<img src="gif3.gif" id="gif3" onmouseover="rollover(3)" onmouseout="rollout(3)" />
<img src="gif4.gif" id="gif4" onmouseover="rollover(4)" onmouseout="rollout(4)" />

Je kunt als je wil nog meer plaatjes toevoegen.
 
Helaas werkt het bij mij niet (hoop dat ik het goed doe)

Ik zal in ieder geval nog een keer goed uitleggen wat ik wil, zodat we elkaar in ieder geval niet verkeerd begrijpen (als dat nu het geval zou zijn).

Ik heb 4 plaatjes. Alle 4 de plaatjes in normale kleuren. Ik heb dezelfde plaatjes ook in kleur veranderd, een rode vloed eroverheen. De 4 plaatjes met normale kleur staan naast elkaar op de website. Dat zijn gif1.jpg, gif2.jpg, gif3.jpg en gif4.jpg. Als ik nu met mijn muis over het linker plaatje ga, dus dat is gif1.jpg, dan moet deze veranderen in het plaatje met de rode vloed en die heb ik genaamd gif1.1.jpg. Ga ik nu over het tweede plaatje, dus gif2.jpg dan moet deze veranderen in gif2.1.jpg maar gif1 moet dan ook veranderen in gif1.1.jpg.

Dus als je met je muis over gif4 gaat, moeten alle plaatjes veranderen in die met ".1" erachter.
 
Laatst bewerkt:
Oeps, ik heb een erg dom foutje gemaakt. Ik had type="text/html" in plaats van type="text/javascript". Hierbij de correcte code:

HTML: 
<script type="text/javascript">
<!--

function rollover(id) {
	for (var i = 1; i <= id; i++) document.getElementById('gif' + id).src = 'gif' + id + '.' + id + '.gif';
}

function rollout(id) {
	for (var i = 1; i <= id; i++) document.getElementById('gif' + id).src = 'gif' + id + '.gif';
}

//-->
</script>

<img src="gif1.gif" id="gif1" onmouseover="rollover(1)" onmouseout="rollout(1)" />
<img src="gif2.gif" id="gif2" onmouseover="rollover(2)" onmouseout="rollout(2)" />
<img src="gif3.gif" id="gif3" onmouseover="rollover(3)" onmouseout="rollout(3)" />
<img src="gif4.gif" id="gif4" onmouseover="rollover(4)" onmouseout="rollout(4)" />
 
Dat is al een verbetering, het script werkt nu wel echter veranderd alleen het plaatje waar de muis overheen gaat. Dus dat is hetzelfde als een gewone mouseover voor 1 afbeelding. Voor de zekerheid heb ik in mijn vorige bericht nog een uitleg gegeven, zodat we elkaar in ieder geval goed begrijpen :rolleyes:

In ieder geval bedankt voor de hulp tot zover:thumb: Dit is hoe ik het nu gebruikt heb:

HTML: 
<script type="text/javascript">
<!--

function rollover(id) {
	for (var i = 1; i <= id; i++) document.getElementById('gif' + id).src = 'gif' + id + '.' + id + '.PNG';
}

function rollout(id) {
	for (var i = 1; i <= id; i++) document.getElementById('gif' + id).src = 'gif' + id + '.PNG';
}

//-->
</script>

<img src="gif1.PNG" id="gif1" onmouseover="rollover(1)" onmouseout="rollout(1)" />
<img src="gif2.PNG" id="gif2" onmouseover="rollover(2)" onmouseout="rollout(2)" />
<img src="gif3.PNG" id="gif3" onmouseover="rollover(3)" onmouseout="rollout(3)" />
<img src="gif4.PNG" id="gif4" onmouseover="rollover(4)" onmouseout="rollout(4)" />

Mijn plaatjes heten:

gif1.PNG
gif2.PNG
gif3.PNG
gif4.PNG
gif1.1.PNG
gif2.1.PNG
gif3.1.PNG
gif4.1.PNG
 
Laatst bewerkt:
Ik zal in het vervolg m'n code maar testen, nu moet ie goed zijn. ;)

[HTML<script type="text/javascript">
<!--

function rollover(id) {
for (var i = 1; i <= id; i++) document.getElementById('gif' + i).src = 'gif' + i + '.' + i + '.gif';
}

function rollout(id) {
for (var i = 1; i <= id; i++) document.getElementById('gif' + i).src = 'gif' + i + '.gif';
}

//-->
</script>

<img src="gif1.gif" id="gif1" onmouseover="rollover(1)" onmouseout="rollout(1)" width="20" height="20" />
<img src="gif2.gif" id="gif2" onmouseover="rollover(2)" onmouseout="rollout(2)" width="20" height="20" />
<img src="gif3.gif" id="gif3" onmouseover="rollover(3)" onmouseout="rollout(3)" width="20" height="20" />
<img src="gif4.gif" id="gif4" onmouseover="rollover(4)" onmouseout="rollout(4)" width="20" height="20" />[/HTML]
 
Jaaa ze werken!! Superrrr bedankt, ook voor de snelle (en tegelijk late, het is half 2) reactie :D
 
Heb de oplossing al, de images gewoon naast elkaar plaatsen ipv onder elkaar

Oops excuses, er komt nog een probleempje bij. Er zit nu een kleine ruimte tussen de afbeeldingen, een ruimte van 3 pixeltjes ofzo. Is het mogelijk dat de afbeeldingen gewoon op elkaar aansluiten? De HSPACE="0" VSPACE="0" codes werken niet volgens mij, of ik moet iets fout doen.
 
Laatst bewerkt:
Oeps toch niet. Ben nu gigantisch aan het spammen volgens mij, excuses. Aan de onderkant van de afbeelding blijft een kleine ruimte zitten van 4 pixeltjes ofzo. Met de VSPACE="0" attribuut krijg ik het niet weg. Ook de cellspacing/padding attribuut in de tabel werkt niet, maar de ruimte zit echt vastgeplakt aan de onderkant van de afbeeldingen. Valt dit weg te halen?

1000x excuses, ook dit heb ik nu ineens opgelost na het plaatsen van dit bericht. Het zal aan de tijd van de dag liggen............ toch bedankt!! Zal vanaf nu mijn monfd houden hahaha
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan