[LinksWithATwist]

Dieses Script erzeugt eine einfache Navigation mit Bildvorschau...

[Code]

[zwischen <HEAD> und </HEAD>]

<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://www.nightfire.ch/java/
Created by: Cat Arriola :: http://astrodiva.journalspace.com */

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


var listName='Nightfire Themes'; // 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('Halloween', 'nf_hlw_preview.gif', 'Halloween', '#', 'm' + mpic.length);
mpic[mpic.length] = new info('Christmas', 'nf_xmas_preview.gif', 'Christmas', '#', 'm' + mpic.length);
mpic[mpic.length] = new info('New Year', 'nf_ny_preview.gif', 'New Year', '#', 'm' + mpic.length);
mpic[mpic.length] = new info('Matrix', 'nf_mtx_preview.gif', 'Matrix', '#', 'm' + mpic.length);
mpic[mpic.length] = new info('Planet N8i', 'nf_pn8_preview.gif', 'Planet N8i', '#', 'm' + mpic.length);
mpic[mpic.length] = new info('Spyro', 'nf_spy_preview.gif', 'Spyro', '#', '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>

[zwischen <BODY> und </BODY>]

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

[Autor]

Cat Arriola

[Download]

Kopieren Sie bitte den Code

Copyright © 1998- Nightfire Webworker Archiv Script No: 662