...

View Full Version : Image Swap in JS



new_comer
02-23-2007, 04:52 PM
Greetings,

Hi all! I would like to request any hints if there is any way that I can use OnMouseOver effect in Javascript Script that can swap the image in another html row rather than the same row? Many thanks !




Best regards


New Comer

MikeFoster
02-23-2007, 05:41 PM
Anything is possible ;)

Show us the relevant html and we can make suggestions.

new_comer
02-25-2007, 10:15 AM
Thanks Mike and everyone,

I have coded some javascript for this, but it only runs once; for OnMouseOver but not OnMouseOut. I have tried to code it some other ways but it is still the OnMouseOver works only! Hope you can make some suggestions on this. Many thanks!

==========================================================
<html>
<head>
<title>dsp</title>
</head>
<body>

<script>
function chg(){
document.write('<br>');
document.write('<tr>');
document.write('<td><img src=on.gif></td>');
document.write('</tr>');
document.write('<br>');
}

function first_write(){
document.write('<br>');
document.write('<tr>');
document.write('<td><img src=off.gif></td>');
document.write('</tr>');
document.write('<br>');
}

window.onload = first_write();
</script>

<tr>
<td><a href=test.htm onMouseover=chg() onMouseout=first_write()><img src=dsp.gif name=hob></a></td>
</tr>
</body>
</html>
==========================================================

Best regards


New Comer

MikeFoster
02-26-2007, 03:17 PM
You can't use 'document.write' after the page is already loaded.

Please describe exactly what you want to do. Are you inserting and removing TRs? Or just changing the src of an img?

There are many threads here on mouseover image replacement.

new_comer
02-27-2007, 10:16 AM
Hi Mike, thanks for your reply,

I am not going to remove/insert TR but just making image swap. However, I cannot find any suitable tool to achieve this and hope I didn't request to much. I hope that I can as follows:

1. Display the image (DSP) and image (OFF) on different rows/pages during the page was first loaded.

2. When OnMouseOver for image (DSP) the image (OFF) will be swapped with image (ON) .

3. When OnMouseOut for image (DSP) the image (OFF) will be swapped back again.

Instead of using functions, will there be any way/tool to make this work or do I need to change the structure to some other way?


The page will be as follows:

==========================================================
<html>
<head>
<title>Index</title>
</head>
<body>
<center><table>
<tr>
<td align=center><img src=off.gif <!--(this will be changed to on.gif if mouse is over on image (dsp)-->></td>
</tr>
<tr>
<td></td>
</tr>
<!-- some more rows here-->
<tr>
<td align=center><a href="test.htm" onMouseover="function or other means to swap off.gif to on.gif" onMouseout="function or other means to swap on.gif back to off.gif"><img src="dsp.gif"></a></td>
</tr>
</table>
</center>
</body>
</html>
==========================================================

Best regards


New Comer

MikeFoster
02-27-2007, 02:03 PM
<table>
<tr>
<td><img id='imgSwap' src='off.gif'></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>
<a href='test.htm' onmouseover="document.getElementById('imgSwap').src='on.gif'"
onmouseout="document.getElementById('imgSwap').src='off.gif'"><img src="dsp.gif"></a>
</td>
</tr>
</table>

new_comer
02-27-2007, 03:45 PM
Many thanks Mike ...!:thumbsup:

phill_ridout
02-27-2007, 06:19 PM
of course you can jazz it up by preloading the images ;-)



<head>
<script language="javascript">
offIMG = new Image();
offIMG.src = "off.gif";

onIMG = new Image();
onIMG.src = "on.gif";
</script>
</head>

and then change


<a href='test.htm' onmouseover="document.getElementById('imgSwap').src='on.gif'"
onmouseout="document.getElementById('imgSwap').src='off.gif'"><img src="dsp.gif"></a>

to


<a href='test.htm' onmouseover="document.getElementById('imgSwap').src=onIMG.src"
onmouseout="document.getElementById('imgSwap').src=offIMG.src"><img src="dsp.gif"></a>

new_comer
02-28-2007, 05:33 AM
Many thanks Phill as well as everyone of you!;)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum