Avatar billede mazey Praktikant
24. juli 2006 - 20:39 Der er 1 løsning

Spørgsmål omhandlende eksisterende script

Hej Eksperter...

Jeg har fundet dette script på dynamicdrive.com og det er, synes jeg, rigtigt brugbart.
Jeg ville dog gerne hvis det var muligt at slippe for selve selectboksen og kun have normale tekst links istedet... Hvordan gøres det? egentlig ville jeg helst at det skiftede når man førte musen henover linket, men hvis det ikke er muligt, så bare hvor man kan klikke på linket og der derefter vises billede og tekst.


Koden ser således ud:


<form name="dynamicselector">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="178">
<tr>
<td width="35%" valign="top" align="left">
<select name="dynamicselector2" size="4" onChange="generateimage(this.options[this.selectedIndex].value)">

            <option value="http://images.amazon.com/images/P/1565924940.01.TZZZZZZZ.jpg" selected>DHTML Guide</option>
            <option value="http://images.amazon.com/images/P/0201353415.01.TZZZZZZZ.jpg">DHTML QuickStart</option>
            <option value="http://images.amazon.com/images/P/1556225865.01.TZZZZZZZ.jpg">HTML4</option>
            <option value="http://images.amazon.com/images/P/1861001746.01.TZZZZZZZ.jpg">IE5 DHTML</option>
</select>
</td>
<td width="65%" valign="top" align="left"><ilayer id="dynamic1" width=100% height=178><layer id="dynamic2" width=100% height=178><div id="dynamic3"></div></layer></ilayer></td>
</tr>
</table>
</form>

<script>

//Dynamic Image selector Script- © Dynamic Drive (www.dynamicdrive.com)
//For full source code, installation instructions,
//100's more DHTML scripts, visit dynamicdrive.com

//enter image descriptions ("" for blank)
var description=new Array()
description[0]="DHTML: The Definitive Guide"
description[1]="DHTML Visual QuickStart Guide"
description[2]="HTML 4 and DHTML"
description[3]="IE5 DHTML Reference"

var ie4=document.all
var ns6=document.getElementById
var tempobj=document.dynamicselector.dynamicselector2
if (ie4||ns6)
var contentobj=document.getElementById? document.getElementById("dynamic3"): document.all.dynamic3
function generateimage(which){
if (ie4||ns6){
contentobj.innerHTML='<center>Loading image...</center>'
contentobj.innerHTML='<center><img src="'+which+'"><br><br>'+description[tempobj.options.selectedIndex]+'</center>'
}
else if (document.layers){
document.dynamic1.document.dynamic2.document.write('<center><img src="'+which+'"><br><br>'+description[tempobj.options.selectedIndex]+'</center>')
document.dynamic1.document.dynamic2.document.close()
}
else
alert('You need NS 4+ or IE 4+ to view the images!')
}

function generatedefault(){
generateimage(tempobj.options[tempobj.options.selectedIndex].value)
}

if (ie4||ns6||document.layers){
if (tempobj.options.selectedIndex!=-1){
if (ns6)
generatedefault()
else
window.onload=generatedefault
}
}

</script>
Avatar billede mazey Praktikant
24. juli 2006 - 20:56 #1
Fandt selv svaret på dynamicdrive...
Der ser således ud;
<html><title>Selects Demo</title><head><style>p.sel{cursor:pointer;cursor:hand;}</style></head>
<body>
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="178">
<tr>
<td width="35%" valign="top" align="left">

<p class="sel" id="http://images.amazon.com/images/P/1565924940.01.TZZZZZZZ.jpg" onClick="generateimage(this.id,'0')">DHTML Guide</p>
<p class="sel" id="http://images.amazon.com/images/P/0201353415.01.TZZZZZZZ.jpg" onClick="generateimage(this.id,'1')">DHTML QuickStart</p>
<p class="sel" id="http://images.amazon.com/images/P/1556225865.01.TZZZZZZZ.jpg" onClick="generateimage(this.id,'2')">HTML4</p>
<p class="sel" id="http://images.amazon.com/images/P/1861001746.01.TZZZZZZZ.jpg" onClick="generateimage(this.id,'3')">IE5 DHTML</p>
</td>
<td width="65%" valign="top" align="left"><div id="dynamic3"><center><img src="http://images.amazon.com/images/P/1565924940.01.TZZZZZZZ.jpg"><br><br>DHTML: The Definitive Guide</center></div></td>
</tr>
</table>
<script>
//Dynamic Image selector Script- © Dynamic Drive (www.dynamicdrive.com)
//For full source code, installation instructions,
//100's more DHTML scripts, visit dynamicdrive.com

//enter image descriptions ("" for blank)
var description=new Array()
description[0]="DHTML: The Definitive Guide"
description[1]="DHTML Visual QuickStart Guide"
description[2]="HTML 4 and DHTML"
description[3]="IE5 DHTML Reference"

var ie4=document.all
var ns6=document.getElementById
if (ie4||ns6)
var contentobj=document.getElementById? document.getElementById("dynamic3"): document.all.dynamic3
function generateimage(which,desc){
if (ie4||ns6){
contentobj.innerHTML='<center>Loading image...</center>'
contentobj.innerHTML='<center><img src="'+which+'"><br><br>'+description[desc]+'</center>'
}
else
alert('You need NS 6+ or IE 4+ to view the images!')
}
</script></body></html>
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester