Solved

thumbnail mouseover

Posted on 2004-09-23
10
297 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
Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

 
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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
push Book Today button to right 10 59
"Go Fund Me" type plugin 5 40
What web tools we can use to create a web apps that holds clients data 3 23
CSS - Centering an image 2 23
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 article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to count occurrences of each item in an array.

713 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