Jump to content

HTML ROllover


sheraz

Recommended Posts

hi, i am new to html. i have write code for image roll over. but it is not working at all. please guide me what the problem is?

here is the code.

 

<html>

 

<body>

 

<a href="#" onMouseOver="document.image.src='navbar_home_rollover.jpg';return true" onMouseOut = "document.image.src='navbar_home.jpg';return true">

<image src="navbar_home.jpg"></a>

</body></html> :'(

Link to comment
https://forums.phpfreaks.com/topic/175606-html-rollover/
Share on other sites

Here you go:

<script language="Javascript">
<!--
//Simple Switch Image Russia Inc.
//Made By Russia of PHPFreaks.com 

if (document.images) {
     button1 = new Image
     button2 = new Image

     button1.src = 'navbar_home.jpg'
     button2.src = 'navbar_home_rollover.jpg'
}
//-->
</script>

<a href="link.php" onmouseover="document.rollover.src=button2.src" onmouseout="document.rollover.src=button1.src">

<img src="navbar_home.jpg" name="rollover" border="0"></a>


 

Link to comment
https://forums.phpfreaks.com/topic/175606-html-rollover/#findComment-925416
Share on other sites

Actually, I wouldn't use JavaScript at all (The less you use it the better). Something like this would work

 

a {
    width:100px;
    height:40px;
    background:url('images/button_1.jpg');
}

a:hover {
    background:url('images/button_1_hover.jpg');
}

a span {
    display:none;
}

 

<a href='http://google.com'><span>Link name</span></a>

Link to comment
https://forums.phpfreaks.com/topic/175606-html-rollover/#findComment-926123
Share on other sites

Yes, then you would use ids

 

#menu-1 {
    width:100px;
    height:40px;
    background:url('images/button_1.jpg');
}

#menu-1:hover {
    background:url('images/button_1_hover.jpg');
}

#menu-1 span {
    display:none;
}

 

<a href='http://google.com' id="menu-1"><span>Link name</span></a>

Link to comment
https://forums.phpfreaks.com/topic/175606-html-rollover/#findComment-930243
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.