Solved

thumbnail mouseover

Posted on 2004-09-23
10
293 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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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

3 Use Cases for Connected Systems

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

Question has a verified solution.

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

Suggested Solutions

Problem to be resolved in this article Currently, development of website and web application can be done without writing thousands of lines of programming code by hand. Description This can be done through by using a open source framework such …
Envision that you are chipping away at another e-business site with a team of pundit developers and designers. Everything seems, by all accounts, to be going easily.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

867 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

16 Experts available now in Live!

Get 1:1 Help Now