Solved

thumbnail mouseover

Posted on 2004-09-23
10
292 Views
Last Modified: 2008-03-06
I looking for info on how to create a clickable thumbnail (lets say on the top) and have a larger view of this images open on at the bottom without going to a different page.
sort of a mouse over only it would be open in a different spot. I hope i made my self clear.
0
Comment
Question by:alberte
10 Comments
 
LVL 49

Expert Comment

by:Roonaan
ID: 12133424
<div id="top">
  <a href="images/img1.jpg" target="bottom"><img src="images/thumbs/thumb1.jpg" /></a>
  <a href="images/img2.jpg" target="bottom"><img src="images/thumbs/thumb2.jpg" /></a>
  <a href="images/img3.jpg" target="bottom"><img src="images/thumbs/thumb3.jpg" /></a>
</div>
<iframe style="width:100%" id="bottom"></iframe>

-r-
0
 
LVL 7

Expert Comment

by:smolam
ID: 12133450
You can do this with Javascript and the DIV tag, also known as a layer.  Here is an example of someone who has created his own draggable layer, you could use some of his code or modify it do do what you want: http://www.codelifter.com/main/javascript/dragablelayer.html or another simpler example is here:http://www.a1javascripts.com/tutorials/Showing_Layers.html of course you would just have you're photo in the hidden layer!
0
 
LVL 49

Accepted Solution

by:
Roonaan earned 125 total points
ID: 12133476
otherwise you could use javascript:
<script type="text/javascript">
  function linkedthumb(thumbimage, fullimage)
  {
    document.write('<img src="' + thumbimage + '"');
    document.write(' style="cursor;pointer;"');
    if(document.getElementById)
      document.write(' onClick="document.getElementById(\'fullimage\').src=\'' + fullimage + '\';" ');
    else if(document.all)
      document.write(' onClick="document.all.fullimage.src=\'' + fullimage + '\';" ');
    document.write(' />');
  }
</script>

<-- header html -->
<div id="thumbs">
<script type="text/javascript">
  linkedthumb('images/thumbs/img1.jpg', 'images/img1.jpg');
  linkedthumb('images/thumbs/img2.jpg', 'images/img2.jpg');
  linkedthumb('images/thumbs/img3.jpg', 'images/img3.jpg');
  linkedthumb('images/thumbs/img4.jpg', 'images/img4.jpg');
  linkedthumb('images/thumbs/img5.jpg', 'images/img5.jpg');
</script>
</div>
<div style="text-align:center;">
  <img id="fullimage" src="" />
</div>
0
 
LVL 2

Expert Comment

by:kmalhotra
ID: 12133491
You need to do this.

//IN HEADER

<SCRIPT LANGUAGE="JavaScript">
<!--
var redarrow=new Image(10,5);
redarrow.src="red.gif";
var bluearrow=new Image(10,5);
bluearrow.src="blue.gif";
// -->
</SCRIPT>

//IN HTML
<A HREF="#" onMouseOver="document.Arrow.src=redarrow.src; return true"
onMouseOut="document.Arrow.src=bluearrow.src; return true">
<IMG SRC="blue.gif" NAME="Arrow" WIDTH="10" HEIGHT="5" BORDER="0" ALT="next"> </A>

I hope this is clear.

Thanks
KM
0
 

Author Comment

by:alberte
ID: 12134067

Love this code beatuful and easty.
The only thing i would like to change is on startup i get a blank or missing image.
so i wonder if  it could start with a certain image for exaple  the 'images/img1.jpg' ?


otherwise you could use javascript:
<script type="text/javascript">
  function linkedthumb(thumbimage, fullimage)
  {
    document.write('<img src="' + thumbimage + '"');
    document.write(' style="cursor;pointer;"');
    if(document.getElementById)
      document.write(' onClick="document.getElementById(\'fullimage\').src=\'' + fullimage + '\';" ');
    else if(document.all)
      document.write(' onClick="document.all.fullimage.src=\'' + fullimage + '\';" ');
    document.write(' />');
  }
</script>

<-- header html -->
<div id="thumbs">
<script type="text/javascript">
  linkedthumb('images/thumbs/img1.jpg', 'images/img1.jpg');
  linkedthumb('images/thumbs/img2.jpg', 'images/img2.jpg');
  linkedthumb('images/thumbs/img3.jpg', 'images/img3.jpg');
  linkedthumb('images/thumbs/img4.jpg', 'images/img4.jpg');
  linkedthumb('images/thumbs/img5.jpg', 'images/img5.jpg');
</script>
</div>
<div style="text-align:center;">
  <img id="fullimage" src="" />
</div>
 
 
0
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 49

Expert Comment

by:Roonaan
ID: 12134110
Yes you would just

<div style="text-align:center;">
  <img id="fullimage" src="myfirstimage.jpg" />
</div>

regards

-r-
0
 

Author Comment

by:alberte
ID: 12134250
Thank you and all the other guys for your incedible fast help
0
 

Author Comment

by:alberte
ID: 12134348
Is there a way to majke it as a mouse over as oposing to a click?
0
 
LVL 49

Expert Comment

by:Roonaan
ID: 12134431
change onclick to onmouseover :-)
0
 

Author Comment

by:alberte
ID: 12134591
excellent!
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now