mouse over zonder javascript

[djeric]

hoi


ik wil een mous over maken van 2 verschillende fotos.

dit heb ik nu ook gedaan met javascript.

maar is het niet mogelijk om dit enkel in html te doen???

want ik wil eigenlijk zo min mogelijk javascript gebruiken.

maar hoe ziet mijn mouse over van 2 verschillende fotos in de html code eruit???

groeten eric.

mijn huidige code in javascript:

<script language="Javascript">

<!--
if (document.images)
{
image1 = new Image
image2 = new Image
image1.src = 'index/1.JPG'
image2.src = 'foto/slides/34.JPG'
}
-->

</script>
<a href="http://www.spikey.tk/index.html"

onMouseOver="document.mouseover.src=image2.src" onMouseOut="document.mouseover.src=image1.src">

<img src="index/1.JPG" WIDTH=366 HEIGHT=357 ALIGN="left" ALT="spike" border=0 name="mouseover"></a>

 

[peter vazed]

Met css
zwier
mouse over css
in google.

 

[pilootnour5]

Dit is je oplossing:
http://www.helpmij.nl/forum/showthread.php?t=500757

 

[djeric]

Dit is je oplossing:
http://www.helpmij.nl/forum/showthread.php?t=500757

deze link had ik al bekeken idd.

maar mijn plaatjes staan niet online.

dus heb geen url...

maar staan wel op mijn website.

maar misschien kan ik 2 plaatjes opgeven in url en dan de code kopieren en de url weer terug aanpassen in mijn eigenste url.

ik probeer wel wat.

 

[pilootnour5]

Als ze op je website staan, dat staan ze ook op het internet. Dus ook met een URL
Wat is je website als ik vragen mag, of waar staan de plaatjes...

 

[Goeroeboeroe]

Die oplossing om online automatisch 'n mouseover te maken werkt ook met JavaScript, en bovendien niet de beste.
Met html/css is 't vrij simpel. Het kan op allerlei manieren en desgewenst kun je er ook nog (opgemaakte) tekst op projecteren, maar dan wordt het iets ingewikkelder.
Ik heb 't in 'n <a> gestopt, omdat het anders niet werkt in Internet Explorer 6.

<a id="nr-001" href="#"><img src="origineel.jpg" alt="Originele afbeelding" width="180" height="161" /></a>

De css:

a#nr-001 {display: block; width: 180px; height: 161px;}
img {border: 0;}
a#nr-001:hover img {display: none;}
a#nr-001:hover {background: url(vervang.jpg);}

In eerste instantie is de html gewoon die voor 'n afbeelding in 'n link, inclusief alt-tekst (belangrijk voor spraakbrowsers e.d. en zoekmachines).
a#nr-001 {display: block: width: 180px; height: 161px;}
Omdat 'n <a> 'n inline-element is, maken we er 'n blok-element van, zodat je er breedte en hoogte aan kunt geven. Die breedte en hoogte moeten even groot zijn als die van de originele afbeelding (of van de vervangende, als die groter is).
Hierdoor werkt hoveren over de hele <a>, ook als er geen originele afbeelding meer in staat.

img {border: 0;}
Normaal genomen krijgt 'n afbeelding in 'n link 'n lelijke blauwe border. Weg ermee.

a#nr-001:hover img {display: none;}
Bij hoveren over de <a> originele afbeelding verbergen.

a#nr-001:hover {background: url(vervang.jpg);}
Zet de vervangende afbeelding als achtergrond neer als ik over de link hover.

De veel uitgebreidere uitleg staat op http://www.css-voorbeelden.nl/menu/knoppen/plat/menu-027.html

Je kunt ook twee 'echte' afbeeldingen met alt-tekst in de <a> zetten en er beurtelings een verbergen. Feitelijk zijn er tig manieren.