PDA

Click to See Complete Forum and Search --> : Images appearing on one side of the page

jdslammer
03-28-2006, 01:17 AM
Hi

I was wondering if anyone can help me. I'm after a simple script that allows a user to hover over a thumbnail picture and a much larger image appears on say the left side of the page, nothing more. Can anyone assist me with some code?

Thanks

Simon
kryptonboy22
03-28-2006, 01:57 AM
here you go:
<div align="left"><img src="typingguy.gif" width="110" height="110"> </div>

if you want it to be on the right side just change it to <div align="right">

another is by using table

hope it helps you!
jdslammer
03-28-2006, 02:22 AM
Hi

I'm very new to this, how exactly would i use this code?

I don't mind using tables, but shouldn't there be say a mouseover command or something similar?

Thanks

Simon
kryptonboy22
03-28-2006, 02:42 AM
now i know what you mean. place this in the body of the page

<SPAN onMouseOver="call script or function'">
<IMG SRC="image.gif" height="50" width="150" name="pic1">
</SPAN>


cant help you with the code for the script for now but my idea is you should have 2 similar image but different in size. the one should be thumbnail and the large one which you will call inside the script that will display on the left side of your page.
kryptonboy22
03-28-2006, 02:44 AM
or if you what to use same image just define the size when you call the image in the script
jdslammer
03-28-2006, 03:10 AM
Hi

Thanks for your response

This is where i'm struggling a bit, cause nobody seems to have the code for it. Everybody has the code for the image swapping, but only on top of one another not showing the image on another part of the page

Simon
konithomimo
03-28-2006, 11:16 AM
<html>
<head>
<script type="text/javascript">
function showThumb(SR)
{
var myiframe = document.getElementById('iframe1');
myiframe.src = SR;
}
</script>
</head>
<body>
<div id="mydiv" align="left">
<iframe src="empty.jpg" width="500" height="500" id="iframe1">
</div>
<div id="right" width="75" height="500" align="right">
<img id="thumb1" src="pic1.jpg" onmouseover="showThumb(this.src)" onmouseout="showThumb('blank.jpg')" alt="Picture 1" width="65" height=" 65">
<img id="thumb2" src="pic2.jpg" onmouseover="showThumb(this.src)" onmouseout="showThumb('blank.jpg')" alt="Picture 2" width="65" height=" 65">
<img id="thumb3" src="pic3.jpg" onmouseover="showThumb(this.src)" onmouseout="showThumb('blank.jpg')" alt="Picture 3" width="65" height=" 65">
</div>
</body>
</html>
jdslammer
03-29-2006, 12:55 AM
Thanks for your code.

So what do i have to do to make this code work for me, do i just have to change the images to whatever i have???

Simon
konithomimo
03-29-2006, 05:10 AM
yes, just add all of the code into your own page and then change the image names to your images.
jdslammer
03-29-2006, 05:16 AM
I have changed the jpg images to my own, but all i get is 1 picture in the i-frame and nothing else, what have i missed out????

Sorry to be a pain, i do appreciate your help as this has been bugging me for ages

Thanks

Simon