07. august 2002 - 15:27
Der er
5 kommentarer og 1 løsning
position af imgs i samme celle
jeg har brug for at få vist forskellige billeder i den samme tablecell når man fører musen over forskellige navne i en anden celle. Altså så billederne er skjulte, med mindre man kører hånden hen over teksten. Indtil videre er det kun lykkes at få vist billederne i række efter hinanden i den samme celle. Det er muligvis et samarbejde mellem javascript og css, men da jeg kun til nød kan rette i færdiglavede scripts, bliver kræver det nok lidt uddybende forklaring. Jeg benytter Dreamweaver MX så koden skal kunne arbejde sammen med det program. Da jeg er ret ny i faget, håber jeg at nogen kan give mig et rimelig overskueligt/forståeligt svar. Her er koden, håber det letter forståelsen. På forhånd tak! <html> <head> <link rel="stylesheet" href="css/indhold.css" type="text/css"> <title>medarbejder</title> <script language="JavaScript"> function Vis_Louise() { document.all["Louise"].style.visibility="visible"; } function Skjul_Louise() { document.all["Louise"].style.visibility="hidden"; } function Vis_Hanne() { document.all["Hanne"].style.visibility="visible"; } function Skjul_Hanne() { document.all["Hanne"].style.visibility="hidden"; } function Vis_Mogens() { document.all["Mogens"].style.visibility="visible"; } function Skjul_Mogens() { document.all["Mogens"].style.visibility="hidden"; } </script> <style> .Louise {visibility: hidden} </style> <style> .Hanne {visibility: hidden} </style> <style> .Mogens {visibility: hidden} </style> </head> <body> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td width="37%"></td> <td width="18%"></td> <td width="45%"><img src="images/LOGO-VIR_lille2.gif" alt="LOGO-VIR_lille2.gif (634 bytes)" align="right" WIDTH="60" HEIGHT="71"></td> </tr> <tr> <td width="37%" height="44"> <h1><br> DIREKTE MAIL TIL MEDARBEJDERNE<br> </h1></td> <td width="18%"></td> <td width="45%"></td> </tr> <tr> <td width="37%" rowspan="3"> <table border="0" cellpadding="0" cellspacing="0" width="91%"> <tr> <td width="30%"><a href="#" onmouseout="Skjul_f1()" onmouseover="Vis_f1()">Mogens Jensen:</a></td> <td width="50%"><a href="xxxxxxxxxx">xxxxxxxx</a></td> </tr> <tr> <td><a href="#" onmouseout="Skjul_Hanne()" onmouseover="Vis_Hanne()">Hanne</a></td> <td> </td> </tr> <tr> <td width="30%">Morten Jensen:</td> <td width="50%"> </td> </tr> <tr> <td><a href="#" onMouseOut="Skjul_Louise()" onMouseOver="Vis_Louise()">Louise:</a></td> <td> </td> </tr> <tr> <td> Doris Jensen:</td> <td><a href="xxxxxxxxxxx">xxxxxx</a></td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td width="30%">Generelt:</td> <td width="50%"><a href="xxxxxxxxxxxx">xxxxxxxxxxx</a></td> </tr> </table> <p> </p> <p> </td> <td width="18%"></td> <td width="45%" rowspan="3"></td> </tr> <tr> <td></td> </tr> <tr> <td height="211"><div class="Louise"> <div align="center"><img src="images/Louise100p.gif" alt="louise" width="100" height="113" border="0" align="top" id="Louise"></div> </div> <div class="Hanne"> <div align="center"><img src="images/hanne.gif" width="100" height="113" alt="Hanne" border="0" align="top" id="Hanne"></div> </div> <div class="Mogens"><img src="images/Mogens.gif" width="100" height="113" alt="" border="0" align="top" id="Mogens"></td> </tr> <tr> <td colspan="2"><hr width="70%" size="1" color="#FA8F0B"> </td> </tr> <tr> <td colspan="2"><p align="center"><strong><font size="1" face="Arial">xxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br> Tlf.: 9831 7711 • Fax: 9831 7755 • xxxxxxxxx• E-mail: <a href="xxxxxxxxxxxxxx">xxxxxxxxxx</a></font></strong></td> </tr> </table> <p class="Louise"> </p> </body> </html>
Annonceindlæg tema
Cloud & AI
I dette særtema ser vi på, hvordan cloud og AI bliver fundamentet for virksomhedernes digitale forretning, og hvordan de nye muligheder for automatisering og forretningsværdi kan udnyttes uden at miste overblik, sikkerhed og menneskelig kontrol.
07. august 2002 - 15:33
#1
Hejsa, Du skal/kan bruge Dreamweavers "Swap Image" færdiglavede javascript. Du finder denne under Design > Behaviours > Swap Image Prøv at leg med det, og se hvad der sker - så fanger du det hurtigt :) Du kan ikke se effekten i Dreamweavers preview - du skal se det i browseren.
07. august 2002 - 15:37
#2
Skulle måske lige tilføje: Brug et blankt billede til "Swap Image Restore". Og lad dette billede være standard-billedet.
07. august 2002 - 15:38
#3
sådan i stedet : <html> <head> <link rel="stylesheet" href="css/indhold.css" type="text/css"> <title>medarbejder</title> <script language="JavaScript"> function visDu(hvilket,vis){ if(vis){ document.all["billedet"].style.visibility="visible"; document.images['billedet'].src= "images/"+hvilket }else document.all["billedet"].style.visibility="hidden"; } </script> </head> <body> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td width="37%"></td> <td width="18%"></td> <td width="45%"><img src="images/LOGO-VIR_lille2.gif" alt="LOGO-VIR_lille2.gif (634 bytes)" align="right" WIDTH="60" HEIGHT="71"></td> </tr> <tr> <td width="37%" height="44"> <h1><br> DIREKTE MAIL TIL MEDARBEJDERNE<br> </h1></td> <td width="18%"></td> <td width="45%"></td> </tr> <tr> <td width="37%" rowspan="3"> <table border="0" cellpadding="0" cellspacing="0" width="91%"> <tr> <td width="30%"><a href="#" onmouseout="visDu('',false)" onmouseover="visDu('images/mogens.gif',true)">Mogens Jensen:</a></td> <td width="50%"><a href="xxxxxxxxxx">xxxxxxxx</a></td> </tr> <tr> <td><a href="#" onmouseout="visDu('',false)" onmouseover="visDu('images/hanne.gif',true)">Hanne</a></td> <td> </td> </tr> <tr> <td width="30%">Morten Jensen:</td> <td width="50%"> </td> </tr> <tr> <td><a href="#" onmouseout="visDu('',false)" onmouseover="visDu('images/Louise100p.gif',true)">Louise:</a></td> <td> </td> </tr> <tr> <td> Doris Jensen:</td> <td><a href="xxxxxxxxxxx">xxxxxx</a></td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td width="30%">Generelt:</td> <td width="50%"><a href="xxxxxxxxxxxx">xxxxxxxxxxx</a></td> </tr> </table> <p> </p> <p> </td> <td width="18%"></td> <td width="45%" rowspan="3"></td> </tr> <tr> <td></td> </tr> <tr> <td height="211"><div class="Louise"> <div align="center"><img style="visibility:hidden" src="images/Louise100p.gif" alt="" width="100" height="113" border="0" align="top" id="billedet"></div> </div> </tr> <tr> <td colspan="2"><hr width="70%" size="1" color="#FA8F0B"> </td> </tr> <tr> <td colspan="2"><p align="center"><strong><font size="1" face="Arial">xxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br> Tlf.: 9831 7711 • Fax: 9831 7755 • xxxxxxxxx• E-mail: <a href="xxxxxxxxxxxxxx">xxxxxxxxxx</a></font></strong></td> </tr> </table> <p class="Louise"> </p> </body> </html> onmouseout="visDu('',false)" // false skjuler billedet onmouseover="visDu('Louise100p.gif',true)" // stien ti det billede du vil vise + true for at vise det :)) /Nikolaj
Slettet bruger
07. august 2002 - 15:38
#4
For det første skal alle dine billeder have sammen størrelse. Så laver du et gennemsigtigt billede på denne størrelse. Derefter indsætter du følgende scritp i <head>: <script> billeder = new Array("billede1.gif", "billede2.gif", "billede3.gif"); //Billederne. Kan udvides! b = new Array(); for (i = 0; i < billeder.length; i++) { b[i] = new Image(); b[i].src = billeder[i]; } </script> I tabel-cellen, hvor billederne skal vises, indsætter du dette: <img src="gennemsigtigt_billede.gif" width="200" height="200" name="mitBill"> Og i den anden celle: <a href="link.html" onMouseOver="document.mitBill = 'billede1.gif';" onMouseOut="document.mitBill = 'gennemsigtigt_billede.gif';">Se billede</a>
07. august 2002 - 15:51
#5
Og her er den så i Dreamweaver-udgaven - med preload af billeder og hele armen. Lav et blankt billede på 100x113 (som dine andre billeder) og kald det blank.gif, og læg det i samme mappe som dine andre billeder - så kører det :) <html> <head> <link rel="stylesheet" href="css/indhold.css" type="text/css"> <title>medarbejder</title> <style> .Louise {visibility: hidden} </style> <style> .Hanne {visibility: hidden} </style> <style> .Mogens {visibility: hidden} </style> <script language="JavaScript" type="text/JavaScript"> <!-- 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('images/mogens.gif','images/hanne.gif','images/louise100p.gif')"> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td width="37%"></td> <td width="18%"></td> <td width="45%"><img src="images/LOGO-VIR_lille2.gif" alt="LOGO-VIR_lille2.gif (634 bytes)" name="Image1" WIDTH="60" HEIGHT="71" align="right" id="Image1"></td> </tr> <tr> <td width="37%" height="44"> <h1><br> DIREKTE MAIL TIL MEDARBEJDERNE<br> </h1></td> <td width="18%"></td> <td width="45%"></td> </tr> <tr> <td width="37%" rowspan="3"> <table border="0" cellpadding="0" cellspacing="0" width="91%"> <tr> <td width="30%"><a href="#" onMouseOver="MM_swapImage('Image1','','images/mogens.gif','blank','','images/mogens.gif',1)" onMouseOut="MM_swapImgRestore()">Mogens Jensen:</a></td> <td width="50%"><a href="xxxxxxxxxx">xxxxxxxx</a></td> </tr> <tr> <td><a href="#" onMouseOver="MM_swapImage('blank','','images/hanne.gif',1)" onMouseOut="MM_swapImgRestore()">Hanne</a></td> <td> </td> </tr> <tr> <td width="30%">Morten Jensen:</td> <td width="50%"> </td> </tr> <tr> <td><a href="#" onMouseOver="MM_swapImage('blank','','images/louise100p.gif',1)" onMouseOut="MM_swapImgRestore()">Louise:</a></td> <td> </td> </tr> <tr> <td> Doris Jensen:</td> <td><a href="xxxxxxxxxxx">xxxxxx</a></td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td width="30%">Generelt:</td> <td width="50%"><a href="xxxxxxxxxxxx">xxxxxxxxxxx</a></td> </tr> </table> <p> </p> <p> </td> <td width="18%"></td> <td width="45%" rowspan="3"></td> </tr> <tr> <td></td> </tr> <tr> <td height="211"><div class="Louise"> <div align="center"><img src="images/blank.gif" alt="louise" name="blank" width="100" height="113" border="0" align="top" id="Louise"></div> </div> <div class="Hanne"> <div align="center"></div> </div> <div class="Mogens"> </td> </tr> <tr> <td colspan="2"><hr width="70%" size="1" color="#FA8F0B"> </td> </tr> <tr> <td colspan="2"><p align="center"><strong><font size="1" face="Arial">xxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br> Tlf.: 9831 7711 • Fax: 9831 7755 • xxxxxxxxx• E-mail: <a href="xxxxxxxxxxxxxx">xxxxxxxxxx</a></font></strong></td> </tr> </table> <p class="Louise"> </p> </body> </html>
07. august 2002 - 15:53
#6
Denne stump, <div align="center"><img src="images/blank.gif" alt="louise" name="blank" width="100" height="113" border="0" align="top" id="Louise"> Skal selvfølgelig lige rettes til, <div align="center"><img src="images/blank.gif" name="blank" width="100" height="113" border="0" align="top">
Vi tilbyder markedets bedste kurser inden for webudvikling