Avatar billede jes9 Nybegynder
06. maj 2003 - 15:26 Der er 7 kommentarer og
1 løsning

Knap moseover

Hvordan laver man en knap af to billeder?
b1.jpg skal skifte b2.jpg når "mouseover"
og "onclick" link til http://side.htm .
Avatar billede Spotgun Seniormester
06. maj 2003 - 15:28 #1
Så skal du nok ind i (d)html-kategorien i stedet for...
Avatar billede jakobclausen Nybegynder
06. maj 2003 - 15:33 #2
Til det kan du også bruge ImageReady som følger med photoshop.

Kig evt. her: http://www.eksperten.dk/spm/333710
Avatar billede miss-g Seniormester
07. maj 2003 - 07:51 #3
Det er nok svært at forklare. Har her lavet en side med en mouse-over knap i en tabel. Koden:


<!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_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_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_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('file:///C|/Inetpub/wwwroot/Dating/knap-opdater-red.gif')">
<table width="200" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><a href="http://www.side.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','file:///C|/Inetpub/wwwroot/Dating/knap-opdater-red.gif',1)"><img src="file:///C|/Inetpub/wwwroot/Dating/knap-opdater.gif" name="Image1" width="139" height="19" border="0"></a></td>
  </tr>
</table>

</body>
</html>

Men ellers laver man vel 2 forskellige knapper i Photoshop, og det er så hjemmesideprogrammet, der kan lave scriptet.

Jeg bruger Dreamweaver og der kan jeg trykke på ikonet Rollover Image, hvis jeg vil lave en sådan knap. Den spørger så hvilket billede der skal vises først, og hvilket den skal vise, når man kører musen over samt hvor man skal hen, når der bliver trykket.

(Kender ikke funktionen i Image Ready).

Hvilket program bruger du til at lave hjemmeside med?
Avatar billede miss-g Seniormester
07. maj 2003 - 07:58 #4
Screenshot (for at skære det ud i pap) *G*

http://nicolin.starthotel.dk/mouseover.htm
Avatar billede mboesen Novice
07. maj 2003 - 12:37 #5
Du kan sikkert også lave det i dit webprogram, hvis du bruger et sådan?
Avatar billede jes9 Nybegynder
07. maj 2003 - 19:57 #6
:miss-g
Skal jeg så lave et scrip for hver knap ?
Avatar billede mboesen Novice
07. maj 2003 - 20:29 #7
Hvilket program bruger du til at lave hjemmesider i?
Avatar billede miss-g Seniormester
07. maj 2003 - 21:57 #8
Hvis du ikke har et hjemmesideprogram som kan lave koderne såsom Adobe Golive eller Macromedia Dreamweaver, så skal du nok gå efter javascript siderne/tips:

http://hjem.get2net.dk/ahome/koder/javascript_skift_billed.htm
http://www.html.dk/scripts/javascript/00001/
http://www.viewsource.dk/cat.asp?ident=js&catID=2

Dette er et link til en side som kan generere koden for dig. Du fortæller bare hvilke billeder du skal bruge osv....

http://www.hojgard.dk/javascript/mouseover_generator.php

Du kan jo sætte koden ind, og erstatte billederne med dine egne (i koden).

Hvis du trykker preview.... når du har sat koden ind, så kan du bedre se det In Real Life.
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
IT-kurser om Microsoft 365, sikkerhed, personlig vækst, udvikling, digital markedsføring, grafisk design, SAP og forretningsanalyse.

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