Solved

thumbnail mouseover

Posted on 2004-09-23
10
296 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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
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
 
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

How our DevOps Teams Maximize Uptime

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us. Read the use case whitepaper.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Adwords and keywords 2 53
PHP Installer 5 37
Background video not displaying in Internet Explorer. 3 37
what is the best Integrated development environment 2 20
I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

809 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