18. november 2004 - 21:39
Der er
1 kommentar og
1 løsning
Roll-over funktion, hvor billedet bliver større i nyt vindue
Jeg vil meget gerne have hjælp til at kunne lave en roll-over effekt på et lille billede, så når man kører musen hen over, så bliver det lille billede større i et nyt vindue som følger curseren.
Det skal også bruges til, hvis jeg f.eks. har et thumbnail og kører hen over det med musen, så bliver det ligeledes større i et nyt vindue, der følger curseren.
JEg ved ikke, om det er godt nok forklaret, men jeg har set det på andre hjemmeider, så det kan lade sig gøre. Måske er det heller ikke Dreamweaver, det er lavet i.... HÅber i kan hjælpe!
18. november 2004 - 23:29
#1
Hejsa!
Du kan gøre det ved hjælp af lidt javascript.
først skal du bruge 3 billeder: 1 thumbnail, 1 stort billede og en transparant gif i samme størrelse som det store billede.
så laver du et almindeligt billedfelt med thumbnail_billedet.
herefter placerer du et almindeligt billedfelt med den transparante gif i et layer ( så du kan styre placeringen). husk at navngive dine billeder.
tryk så på din thumbnail og gå i behaviors -> tryk på +'et og vælg "swap Image". vælg så den transparante gif først og gå derefter ned i source og find frem til dit store billede og tryk ok.
Det burde være det!
her er koden hvis det går helt galt:
<html>
<head>
<title>test</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_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
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_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onLoad="MM_preloadImages('billede.jpg')">
<table width="100%" height="100%"><tr><td valign="middle" align="center">
<table width="600" height="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="300" align="center" valign="middle"><a href="java script:;" onMouseOver="MM_swapImage('transparant','','billede.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="thumbnail.jpg" name="thumbnail" width="50" height="30" border="0"></a></a></td>
<td width="300" align="center" valign="middle"><div id="layer" style="position:relative; left:0px; top:0px; width:250px; height:150px; z-index:1"><img src="transparant.gif" alt="" name="transparant" width="250" height="150"></div></td>
</tr>
</table></td></tr>
</table>
</body>
</html>
vh.
Martin