Full version: jsB@nk » Link » Links with Twist
URL: https://www.javascriptbank.com/links-with-twist.html
Surprise your visitors as screen shots and text captions appear when they mouseover a list of ordinary looking links. This script creates the links from the information stored in an array, which also makes for quick editing. The links in this example aren't activated.
Full version: jsB@nk » Link » Links with Twist
URL: https://www.javascriptbank.com/links-with-twist.html
<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><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script type="text/javascript"><!-- Begin// Created by: Cat Arriola :: http://astrodiva.journalspace.com/* ------- begin edit -------- */var listName='Blogs I Visit'; // the title of your list between single quotesvar mpic=new Array();/* Edit link info in this order: name, image file, site title, URLInsert 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 + '"> ◄<\/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><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script type="text/javascript"><!-- Begin codeIt()// End --></script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->