picture pop up when mouse-over textlink ?

[vowdy]

I cant seem to find the right form to get a picture to pop up in (a new iframe?) a box, when i mouse-over a text link.

http://img.photobucket.com/albums/v2...dy/example.gif


if anyone can help me on this i'd be very thankful

[LeeU]

You might try the "Links with a Twist" script. It's JavaScript but it works fine. You can find it at: http://javascript.internet.com/navig...h-a-twist.html

[vowdy]

thanks, thats what i need. unfortunatly java is like chinese to me.
the design of the page has already been made with tables. and I have no idea how to
get the script to work on them. =/

[LeeU]

The script is pretty self explanatory (it's JavaScript, by the way, not Java).

Paste this code into the HEAD of your HTML document:

<style type="text/css">
<!--
#hotlist {
  border: 1px solid #dfdfdf;
  padding: 10px;
  width: 168px;
  text-align: left;
  color: gray;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

#hotlist a {
  color: gray;
  text-decoration: none;
}

#preview {
  text-align: center;
  display: none; /* do not change */
}

img.thumbnail {
  border: 1px solid #cccccc;
  cursor: pointer;
  width: 143px; /* change to your picture width */
  height: 90px; /* change to your picture height */
}

div#caption {
  font-size: 8pt;
}

.arrow {
  visibility: hidden; /* do not change */
  color: red;
  font-family: Times New Roman, Times, serif; /* do not change */
}
-->
</style>

<script type="text/javascript">
<!-- Begin
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Cat Arriola :: http://astrodiva.journalspace.com */

/* ------- begin edit -------- */

var listName='Blogs I Visit'; // the title of your list between single quotes
var mpic=new Array();

/* Edit link info in this order: name, image file, site title, URL
Insert each info between single quote marks, followed by a comma
(Replace '#' with the URL but leave the two quotes, i.e.
'http://www.theURL.com')
Do not edit after the URL. Add or remove lines as required */

mpic[mpic.length] = new info('Babs', 'babs.jpg', 'Hamster Tales', '#', 'm' + mpic.length);
mpic[mpic.length] = new info('Euian', 'euian.jpg', 'Hantojin', '#', 'm' + mpic.length);
mpic[mpic.length] = new info('John', 'john.jpg', 'Radical Druid', '#', 'm' + mpic.length);
mpic[mpic.length] = new info('Lillyanne', 'lilly.jpg', 'Astrodiva\'s Notebook', '#', 'm' + mpic.length);
mpic[mpic.length] = new info('May', 'may.jpg', 'Shady Spot', '#', 'm' + mpic.length);
mpic[mpic.length] = new info('Silk', 'silk.jpg', 'In the Realm of Senses', '#', 'm' + mpic.length);

/* ------ Do not edit below this line ------ */

var minArr=new Array();
for (i=0; i<mpic.length; i++) {
  minArr[i]=new Image();
  minArr[i].src=mpic[i].thumb;
}

function info(nam, thumb, Title, web, markID) {
  this.nam = nam;
  this.thumb = thumb;
  this.Title = Title;
  this.web = web;
  this.markID = markID;
}

function codeIt() {
  document.write('<div id="hotlist"><b>' + listName + '<\/b>');
  document.write('<hr width="100%" size="1">');
  for (j=0; j<mpic.length; j++) {
    document.write('<a target="offsite" href="');
    document.write(mpic[j].web);
    document.write('" onMouseover="preview(' + j + ',\'' + mpic[j].markID + '\')">');
    document.write(mpic[j].nam);
    document.write('<\/a><span class="arrow" id="' + mpic[j].markID + '">&nbsp;&#9668<\/span><br>');
  }
  document.write('<br>');
  document.write('<div id="preview">');
  document.write('<img class="thumbnail" alt="" name="screenshot" src="' + minArr[0].src + '" onClick="dest()">');
  document.write('<div id="caption"><\/div>');
  document.write('<P><input type="button" value="Hide preview" onClick="hide()"><\/p>');
  document.write('<\/div><\/div>');

  /* --- Please attribute! The following line must appear --- */
  document.write('<P style="text-align:center; font-size:12px"><A style="color:blue; text-decoration:none" href="http://astrodiva.journalspace.com" target="offsite">C a t   m a d e   i t !<\/a><\/p>');
}

function preview(t,a) {
  unmarkAll();
  document.getElementById(a).style.visibility='visible';
  document.getElementById('preview').style.display='block';
  document.getElementById('caption').innerHTML=mpic[t].Title;
  document.images.screenshot.src=minArr[t].src;
  document.images.screenshot.title='Click to visit ' + mpic[t].nam + '\'s site';
}

function dest() {
  for (x=0; x<mpic.length; x++) {
    if (document.images.screenshot.src==minArr[x].src) {
      window.open(mpic[x].web, 'offsite');
    }
  }
}

function hide() {
  document.getElementById('preview').style.display='none';
  unmarkAll();
}

function unmarkAll() {
  for (c=0; c<mpic.length; c++) document.getElementById(mpic[c].markID).style.visibility='hidden';
}
// End -->
</script>

Be sure to edit the lines listed below the instructions in red above for your own images.

Then, paste this code into the BODY of your HTML document when you want it to be displayed:

<div align="center">
<script type="text/javascript">
<!-- Begin
  codeIt()
// End -->
</script>
</div>

That should do it.