/    Sign up×
Community /Pin to ProfileBookmark

Images appearing on one side of the page

Copy linkTweet thisAlerts:
Mar 28.2006

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

to post a comment
JavaScript

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@kryptonboy22Mar 28.2006 — 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!
Copy linkTweet thisAlerts:
@jdslammerauthorMar 28.2006 — 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
Copy linkTweet thisAlerts:
@kryptonboy22Mar 28.2006 — now i know what you mean. place this in the body of the page

<SPAN onMouseOver="[B]call script or function[/B]'">

<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.
Copy linkTweet thisAlerts:
@kryptonboy22Mar 28.2006 — or if you what to use same image just define the size when you call the image in the script
Copy linkTweet thisAlerts:
@jdslammerauthorMar 28.2006 — 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
Copy linkTweet thisAlerts:
@konithomimoMar 28.2006 — &lt;html&gt;
&lt;head&gt;
&lt;script type="text/javascript"&gt;
function showThumb(SR)
{
var myiframe = document.getElementById('iframe1');
myiframe.src = SR;
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="mydiv" align="left"&gt;
&lt;iframe src="empty.jpg" width="500" height="500" id="iframe1"&gt;
&lt;/div&gt;
&lt;div id="right" width="75" height="500" align="right"&gt;
&lt;img id="thumb1" src="pic1.jpg" onmouseover="showThumb(this.src)" onmouseout="showThumb('blank.jpg')" alt="Picture 1" width="65" height=" 65"&gt;
&lt;img id="thumb2" src="pic2.jpg" onmouseover="showThumb(this.src)" onmouseout="showThumb('blank.jpg')" alt="Picture 2" width="65" height=" 65"&gt;
&lt;img id="thumb3" src="pic3.jpg" onmouseover="showThumb(this.src)" onmouseout="showThumb('blank.jpg')" alt="Picture 3" width="65" height=" 65"&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@jdslammerauthorMar 29.2006 — 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
Copy linkTweet thisAlerts:
@konithomimoMar 29.2006 — yes, just add all of the code into your own page and then change the image names to your images.
Copy linkTweet thisAlerts:
@jdslammerauthorMar 29.2006 — 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
×

Success!

Help @jdslammer spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.15,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...