Mouseover maken

Status
Niet open voor verdere reacties.
leutjebreedbek

leutjebreedbek

Gebruiker
Lid geworden
18 mei 2009
Berichten
650
Hallo allemaal,

Ik wil graag een wat ik mij heb laten vertellen dat de benaming hiervoor is: 'mouseover' maken maar het wil toch niet helemaal lukken,

dus wat ik dus graag wil is dat als je met je muis over een afbeelding gaat deze groter wordt,
nu heb ik de css code hier wel van en dat is:

<a class="pop" href="#"><img src="Hier foto van bijv.158x106.png"
width="158" height="106" alt=""><span><img src="en dan hier een foto van bijv.500x500.jpg"
width="500" height="500" alt=""></span></a>

nu wil ik een plaatje van mijn afbeeldingen uploaden met ImageShack en dan de src invullen, maar ik krijg niet het desgewenst resultaat

weten jullie misschien hulp??

owja, het mag natuurlijk ook ongeveer in die richting zitten van de size, zoals je bij ImageShack kunt instellen

ook heb ik een .tk website en dus niet een .nl of .com e.d.

misschien als er nog meer info voor nodig is hoor ik het graag

maar alvast bedankt:D


groeten
Leutjebreedbek
 
Code die ik zelf onlangs gebruikt heb, misschien heb je er iets aan:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://wwww.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset = UTF-8" />
	</head>
	<body>
	<script>
	       image1 = new Image();
	       image1.src = "image/index.png";
	</script>
	<a href="index.html" target="_self" onmouseover="image1.height=60;" onmouseout="image1.height=30;"><img name="image1" height="30"src="image/index.png"></a>
	
	</body>
</html>

edit: andere oplossing zonder javascript

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://wwww.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset = UTF-8" />
	</head>
	<style>
		img.special{ 
			height:30px;
		}

		img.special:hover{ 
			height:100px;
		}
	</style>
	<body>
			<a href="index.html" target="_self"><img class="special" name="image1" src="image/index.png"></a>
	
	</body>
</html>
 
Laatst bewerkt:
@bram2, hee hartstikke bedankt:D, ik zie dat het bij mij werkt,

maar nu ben ik niet zo super goed in het scripten. maar waar moet ik de link's van de foto zetten?
en ik neem aan 1 van bijv van 100 bij 100 en dan een link van bijv 300 bij 300 of niet?
 
Hoi, oke wat u heeft gezegd heb ik gedaan en dus kwam het er bij mij zo uit te zien:

[XML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://wwww.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://img828.imageshack.us/i/1109605797560pi.jpg/">
<head>
<meta http-equiv="Content-Type" content="text/html; charset = UTF-8" />
</head>
<style>
img.special{
height:30px;
}

img.special:hover{
height:100px;
}
</style>
<body>
<a href="index.html" target="_self"><img class="special" name="image1" src="http://img828.imageshack.us/i/1109605797560pi.jpg/"></a>

</body>
</html>[/XML]

maar wanneer ik dan even kijk of het werkt [ik werk met web page maker]

zie ik mijn afbeelding niet, zou dit kunnen zijn omdat ik m nog niet online heb staan en in een map met images heb gezet of doe ik alsnog wat verkeerd???
 
Zo lukt het wel. "/" in ...pi.jpg/ zorgt voor problemen


Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://wwww.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset = UTF-8" />
    </head>
    <style>
        img.special{ 
            height:30px;
        }
 
        img.special:hover{ 
            height:100px;
        }
    </style>
    <body>
            <a href="index.html" target="_self"><img class="special" name="image1" src="http://img828.imageshack.us/img828/9238/1109605797560pi.jpg"></a>
    
    </body>
</html>

Ook de code <html xmlns="http://img828.imageshack.us/i/1109605797560pi.jpg/"> kun je beter vervangen zoals in mijn code of er gewoon <html> van maken. Heeft te maken met welke versie van html je gebruikt, maar veel details ken ik er ook niet van

edit: De link <a href="index.html" target="_self"> moet je ook nog veranderen of weglaten als je dit niet nodig hebt
 
Laatst bewerkt:
Hee ja nu werkt het:D en ik neem aan dat wanneer ik beide groottes wat groter wil hebben ik

img.special{
height:30px;
}

img.special:hover{
height:100px;


dit moet veranderen? de aantal px?
 
owja zoals ik hierboven vroeg heb ik het zelf gemerkt:D

echt super bedankt voor de hulp!!:D

kan ik weer verder:D
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan