Question:

What is the rollover effect html code?

by | earlier

i noticed rollover effects sometimes doesnt work for firefox so can i get the code? i want the one where it shows image1 and when you hover your mouse over it, it changes to image2. nothing fancy just that. also--if there is a code difference between Internet Explorer and firefox, can i get both?

Tags:

Report

Answer The Question I've Same Question Too

Follow Question

3 ANSWERS

Sort By: Date | Rating

If this is your image:

<img src="pic1.jpg" />

then you can change it by this:

<img src="pic1.jpg" onmouseover="swap(this,'pic2.jpg')" onmouseout="swap(this,'pic1.jpg')" />

<script language="JavaScript" type="text/javascript">

function swap (e,p) { e.src = p; }

</script>

As it says in the code it works with JavaScript. There is no way changing a picture by only using HTML.
Report (0) (0) | earlier
HTML cant do rollovers, from what I remember.

You have to use DHTML or Javascript so that it will work in internet explorer and mozilla based browsers like firefox.
Report (0) (0) | earlier
People who say rollovers can't be done without java-script always forget about the :hover pseudo class in css which works without javascript. All you have to do is set an image as background and then change it on hover. Set it's container to the size of the image in the css.

<html>

<head>

<title></title>

<style type="text/css">

.change { background:url(pic1.jpg) no-repeat; width:100px; height:40px; }

.change:hover { background:url(pic2.jpg) no-repeat; }

</style>

</head>

<body>

<div class="change"></div>

</body>

</html>
Report (0) (0) | earlier