[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

thumbnail mouseover

Posted on 2004-09-23
10
Medium Priority
?
303 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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 500 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
Learn how to optimize MySQL for your business need

With the increasing importance of apps & networks in both business & personal interconnections, perfor. has become one of the key metrics of successful communication. This ebook is a hands-on business-case-driven guide to understanding MySQL query parameter tuning & database perf

 
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: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
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 dynamically set the form action using jQuery.
Suggested Courses

649 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