www.webdeveloper.com
Results 1 to 4 of 4

Thread: picture pop up when mouse-over textlink ?

  1. #1
    Join Date
    Aug 2005
    Posts
    2

    picture pop up when mouse-over textlink ?

    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

  2. #2
    Join Date
    May 2004
    Location
    FL
    Posts
    3,447
    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
    Lee

    ""Men occasionally stumble over the truth, but most of them pick themselves up and hurry off as if nothing ever happened."" -- Sir Winston Churchill

  3. #3
    Join Date
    Aug 2005
    Posts
    2
    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. =/

  4. #4
    Join Date
    May 2004
    Location
    FL
    Posts
    3,447
    The script is pretty self explanatory (it's JavaScript, by the way, not Java).

    Paste this code into the HEAD of your HTML document:

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

    Code:
    <div align="center">
    <script type="text/javascript">
    <!-- Begin
      codeIt()
    // End -->
    </script>
    </div>
    That should do it.
    Lee

    ""Men occasionally stumble over the truth, but most of them pick themselves up and hurry off as if nothing ever happened."" -- Sir Winston Churchill

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles