Avatar billede kirkbye Nybegynder
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!
Avatar billede msamsing Nybegynder
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
Avatar billede msamsing Nybegynder
18. november 2004 - 23:33 #2
okay... havde ikke set det der med at det skulle følge curseren.
den bliver nok for svær for mig :-)
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
Kurser inden for grundlæggende programmering

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