PDA

Click to See Complete Forum and Search --> : Swapping Image with a difference?

tomyknoker
06-24-2003, 10:25 PM
Hi Everyone,
I have this code (below), it is just a simple rollover change from one image to the other. Just wondering what I would do if I want to have it so when the user rolls over with the mouse as well as the image changing another images is visible next to the button as well. So in summary when rollover happened on the button it changed and also turns on another seperate image??
thanks in advance,
Tom

<HTML>
<HEAD>
<TITLE>Buttons</TITLE>
</HEAD>
<SCRIPT language="JavaScript">
<!-- Hide from older browsers

var home1 = new Image(250, 100);
home1.src = "images/home1.gif";
var home2 = new Image(250, 100);
home2.src = "images/home2.gif";

function change(imageName, imagesrc) {
document.images[imageName].src = imagesrc.src;
}

// Stop Hiding -->
</SCRIPT>

<BODY>
<A HREF="#" onMouseover="change('home', home2);"onMouseout="change('home', home1);"><IMG name="home" src="images/home1.gif" width="250" height="100" border="0"></A>
</BODY>
</HTML>
Exuro
06-24-2003, 11:02 PM
Okay, I'm not exactly sure what you're talking about, but what I got from that is that you want two images to rollover when you hover over one of them. If that's what you were talking about, then here's one way to do it:

<HTML>
<HEAD>
<TITLE>Buttons</TITLE>
</HEAD>
<SCRIPT language="JavaScript">
<!-- Hide from older browsers

var home1 = new Image(250, 100);
home1.src = "images/home1.gif";
var home2 = new Image(250, 100);
home2.src = "images/home2.gif";

var other1 = new Image(250, 100);
other1.src = "images/other1.gif";
var other2 = new Image(250, 100);
other2.src = "images/other2.gif";

function change(imageName, imagesrc) {
document.images[imageName].src = imagesrc.src;
}

// Stop Hiding -->
</SCRIPT>

<BODY>
<A HREF="#" onMouseover="change('home', home2), change('other', other2)"
onMouseout="change('home', home1), change('other', other1)"><IMG name="home"
src="images/home1.gif" width="250" height="100" border="0"></A><BR>
<IMG name="other" src="images/other1.gif">
</BODY>
</HTML>

Hope that helped!
tomyknoker
06-24-2003, 11:17 PM
hi,
yeah that is kinda what I wanted to happen. let me try and be more clear. I want the other image to only show up when the mouse rolls over the home image. When the mouse rolls off the home image I want the other image to dissappear??
thanks again,
tom
JHL
06-25-2003, 01:18 AM
use css to make the visibility of the other image hidden.
Then put this:

document.images['other'].style.visibility = 'visible'

in the 'mouseover' event handler and this:

document.images['other'].style.visibility = 'hidden'

in the 'mouseout' event handler of the home image.
tomyknoker
06-25-2003, 01:29 AM
Hi,
I can't do it with CSS as I want to do it without CSS is this possible,
tom
JHL
06-25-2003, 02:18 AM
hmm...
ok, if no css is to be use, wat about this:

<html>
<head>
<title></title>
<script type="text/javascript">
function showhideImage(lid, str)
{
if (str == 'show')
document.getElementById(lid).innerHTML = "<img src='images/other1.gif'>";
else
document.getElementById(lid).innerHTML = " ";
}
</script>
</head>
<body>
<a href="#" onmouseover="showImage('testing', 'show');" onmouseout="showhideImage('testing', 'hide')"><IMG name="home" src="images/home1.gif" width="250" height="100" border="0"></a><br>
<div id="testing"></div>
</body>
</html>
tomyknoker
06-25-2003, 02:22 AM
am only a newbie and am only learning about javascript in class is there a really basic way to do this besides the option that you gave...sorry to be a pain...
JHL
06-25-2003, 02:30 AM
Actually css is the most basic way I can think of.

Can't help you anymore if you don't like my option as i'm out of idea. Maybe some one else here might know of other ways.