Hejsa
Til DW kan du hente en EXTENSION der hedder SHOWHIDE LAYER. Den ligger ved Macromedia, og som registreret bruger har du ret til at logge ind og hente den i deres extension bibliotek. Du skal oprettes som bruger, inden du kan hente noget. Derfor har jeg lige lavet et lille eksempel her.
Anvender du den, laver den følgende kode:
Kode
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
</head>
<body>
<div id="billedlag1" style="position:absolute; left:159px; top:73px; width:612px; height:114px; z-index:1; visibility: hidden;"><img src="/grafik/GRAFIK2_TN" width="468" height="60"></div>
<div id="billedlag2" style="position:absolute; left:159px; top:74px; width:612px; height:114px; z-index:2; visibility: hidden;"><img src="/grafik/GRAFIK2_TN" width="90" height="78"></div>
<a href="javascript:;" onMouseOver="MM_showHideLayers('billedlag1','','show','billedlag2','','hide')" onMouseOut="MM_showHideLayers('billedlag1','','hide','billedlag2','','hide')"><img src="/grafik/GRAFIK1" name="billed1" width="200" border="0" id="billed1"></a></td>
<a href="javascript:;" onMouseOver="MM_showHideLayers('billedlag1','','hide','billedlag2','','show')" onMouseOut="MM_showHideLayers('billedlag1','','hide','billedlag2','','hide')"><img src="/grafik/GRAFIK2" width="50" border="0"></a></td>
</body>
</html> |
Copy - paste til DW's "CODE VIEW"
Der sker følgende:
Der indsættes 2 billeder der navngives (bileld1 og billed2) og der oprettes et billedlag til begge (billedlag1 og billedlag2).
Når musen føres hen over det lille billed. Billed1 vises billedlag1. For en sikkerhedsskyld sikre jeg mig at billedlag2 gemmes. Samme - bare omvendt - procedure med billed 2.
Fordelen ved denne metode er at man KAN kombinere forskellige lag til at være fremme. Du kunne måske på et tidspunkt komme i en situation, hvor du ville vise to billeder samtidig (f.eks. et "før" og "nu" eksempel)
Bemærkninger til ovenstående:
GRAFIK1_TN = den lille version af dit billed nr 1
GRAFIK2_TN = den lille version af dit billed nr 2
GRAFIK1 = den store version af dit billed nr 1 der er placeret i BILLEDLAG1
GRAFIK2 = den store version af dit billed nr 2 der er placeret i BILLEDLAG2
Du skal selvfølgelig selv indsætte noget grafik her.
Det er en god skik at navngive alle elementer. Også fordi flere af skal navngives. Navngiver man alle glemmer man ikke nogen.
Jeg går ud fra at du selv kan finde ud af at placere lagene og lave et layout... Derfor har jeg ikke gjort noget ud af det i eksemplet.
Den øvrige kode på siden er hjælpekode samt noget kode sat ind for at hjælpe med positionering i NS browsere.
Koden kan gøres mere simpel, men det kan du jo så eksperimenterer med.
Du kan evt. prøve at kigge på
www.webdesign101.dk der er en beskrivelse af flere måder at lave det på.
mvh
Benkvist