Avatar billede manon Nybegynder
16. november 1999 - 11:01 Der er 9 kommentarer og
1 løsning

Skift af image kombineret med on/off knap

Følgende side lavet i Dreamweaver og spørgsmålet går ud på følgende:
Hvordan kan jeg sammen med mouseover funktionen lave det således, at imageX også skifter til et andet image (Y) ?
Dvs at når musen er over imageAon/off skal imageX også skifte til et der kaldes for imageY og når den så er over imageBon/off skal imageX skifte til imageY osv.

Jeg håber at have udtrykt mig korrekt, ellers må i bare spørge.
Eller kan i se på http://home1.inet.tele.dk/mlynge/test/imagetest.html hvad jeg mener.

Håber nogen kan hjælpe mig.

<html>
<head>
<title>Imagetestpage</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
function MM_swapImgRestore() { //v2.0
  if (document.MM_swapImgData != null)
    for (var i=0; i<(document.MM_swapImgData.length-1); i+=2)
      document.MM_swapImgData[i].src = document.MM_swapImgData[i+1];
}

function MM_preloadImages() { //v2.0
  if (document.images) {
    var imgFiles = MM_preloadImages.arguments;
    if (document.preloadArray==null) document.preloadArray = new Array();
    var i = document.preloadArray.length;
    with (document) for (var j=0; j<imgFiles.length; j++) if (imgFiles[j].charAt(0)!="#"){
      preloadArray[i] = new Image;
      preloadArray[i++].src = imgFiles[j];
  } }
}

function MM_swapImage() { //v2.0
  var i,j=0,objStr,obj,swapArray=new Array,oldArray=document.MM_swapImgData;
  for (i=0; i < (MM_swapImage.arguments.length-2); i+=3) {
    objStr = MM_swapImage.arguments[(navigator.appName == 'Netscape')?i:i+1];
    if ((objStr.indexOf('document.layers[')==0 && document.layers==null) ||
        (objStr.indexOf('document.all[')  ==0 && document.all  ==null))
      objStr = 'document'+objStr.substring(objStr.lastIndexOf('.'),objStr.length);
    obj = eval(objStr);
    if (obj != null) {
      swapArray[j++] = obj;
      swapArray[j++] = (oldArray==null || oldArray[j-1]!=obj)?obj.src:oldArray[j];
      obj.src = MM_swapImage.arguments[i+2];
  } }
  document.MM_swapImgData = swapArray; //used for restore
}
//-->
</script>
</head>

<body bgcolor="#000000" text="#00FF00">
<div align="center">
  <table width="100%" border="0" height="299">
    <tr>
      <td width="15%">
        <table width="100%" border="0">
          <tr>
            <td>
              <div align="center"><img src="http://home1.inet.tele.dk/mlynge/test/imagex.jpg" width="150" height="150"></div>
            </td>
          </tr>
          <tr>
            <td>
              <div align="center"><a href="http://home1.inet.tele.dk/mlynge/test/imagetest.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('document.ImageA','document.ImageA','http://home1.inet.tele.dk/mlynge/test/Imageaon.jpg')"><img name="ImageA" border="0" src="http://home1.inet.tele.dk/mlynge/test/Imageaoff.jpg" width="150" height="25"></a></div>
            </td>
          </tr>
          <tr>
            <td>
              <div align="center"><a href="http://home1.inet.tele.dk/mlynge/test/imagetest.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('document.ImageB','document.ImageB','http://home1.inet.tele.dk/mlynge/test/Imagebon.jpg')"><img name="ImageB" border="0" src="http://home1.inet.tele.dk/mlynge/test/Imageboff.jpg" width="150" height="25"></a></div>
            </td>
          </tr>
          <tr>
            <td>
              <div align="center"><a href="http://home1.inet.tele.dk/mlynge/test/imagetest.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('document.ImageC','document.ImageC','http://home1.inet.tele.dk/mlynge/test/Imagecon.jpg')"><img name="ImageC" border="0" src="http://home1.inet.tele.dk/mlynge/test/Imagecoff.jpg" width="150" height="25"></a></div>
            </td>
          </tr>
        </table>
      </td>
      <td width="85%">
        <div align="center">
          <p><b><font size="5">Testside</font></b></p>
          <p><b><font size="5">Image X( se nedenunder) skal s&aring; skifte til
            Image Y n&aring;r der bruges mouseoverfunktionen p&aring; image A/B/C.</font></b></p>
          <p><img src="http://home1.inet.tele.dk/mlynge/test/imagey.jpg" width="150" height="150"></p>
          <p>Mouseoverfunktionen skal bibeholdes p&aring; image a,b og c.</p>
          <p>&nbsp;</p>
        </div>
      </td>
    </tr>
  </table>
</div>
</body>
</html>
Avatar billede manon Nybegynder
16. november 1999 - 11:04 #1
PS:

Hvordan undgår jeg den lange <img src="http://her.er hele.min.url.dk" adresse ?
Avatar billede manon Nybegynder
16. november 1999 - 11:05 #2
PPS: Den der henviser til jpg billederne !
Avatar billede skjoldby Nybegynder
16. november 1999 - 11:51 #3
Spm1:

<img src="http://home1.inet.tele.dk/mlynge/test/imagex.jpg" width="150" height="150" name="ImageX">

<a href="http://home1.inet.tele.dk/mlynge/test/imagetest.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('document.ImageA','document.ImageA','http://home1.inet.tele.dk/mlynge/test/Imageaon.jpg'); MM_swapImage('document.ImageX','document.ImageX','http://home1.inet.tele.dk/mlynge/test/ImageY.jpg');">
<img name="ImageA" border="0" src="http://home1.inet.tele.dk/mlynge/test/Imageaoff.jpg" width="150" height="25">
</a>

Du giver altså imageX.jpg navnet ImageX
Derefter laver du endnu et kald til funktionen mm_swapImage ved mouseOver som skifter ImageX med ImageY.

Spm2:
Hvis du har billederne i samme 'mappe' som selve html dokumentet, kan du bare sige: <img src="image.jpg">
Hvis de er i en mappe i den mappe html dokumentet er i, kan du sige: <img src="pics/image.jpg">
Hvis det er en før siger du: <img src="../image.jpg">
Avatar billede manon Nybegynder
16. november 1999 - 12:10 #4
Hej Skjoldby
Tak for dit hurtige svar, men min hjerne befinder sig på stillehavets bund og virker ikke efter hensigten, derfor er du nød til at skære det ud i pap for mig.

Så hvis du kan give mig hele scriptet med de nye tiltag/ideer, så må du gerne det. Og jeg er villeig til at forhøje pointværdien med 100 (160ialt) hvis dette kan være en gulerod.

\ mvh manon
Avatar billede skjoldby Nybegynder
16. november 1999 - 19:19 #5
Hej manon.
Jeg har lige testet det svar jeg gav, og det fungerer ikke helt. Hvis du undlader at bruge funktionen Swap Image Restore og i stedet kun bruger Swap Image, og bruger den både onMouseOver og onMouseOut, og du bestemmer billedet on og off. Så fungere det. Jeg har lavet det om i nedenstående kode. Prøv at paste det ind i Dreamweaver, og se under Behaviors hvad jeg har lavet.
Jeg har også ændret alle billede og link stierne...

<html>
<head>
<title>Imagetestpage</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
function MM_swapImgRestore() { //v2.0
  if (document.MM_swapImgData != null)
    for (var i=0; i<(document.MM_swapImgData.length-1); i+=2)
      document.MM_swapImgData[i].src = document.MM_swapImgData[i+1];
}

function MM_preloadImages() { //v2.0
  if (document.images) {
    var imgFiles = MM_preloadImages.arguments;
    if (document.preloadArray==null) document.preloadArray = new Array();
    var i = document.preloadArray.length;
    with (document) for (var j=0; j<imgFiles.length; j++) if (imgFiles[j].charAt(0)!="#"){
      preloadArray[i] = new Image;
      preloadArray[i++].src = imgFiles[j];
  } }
}

function MM_swapImage() { //v2.0
  var i,j=0,objStr,obj,swapArray=new Array,oldArray=document.MM_swapImgData;
  for (i=0; i < (MM_swapImage.arguments.length-2); i+=3) {
    objStr = MM_swapImage.arguments[(navigator.appName == 'Netscape')?i:i+1];
    if ((objStr.indexOf('document.layers[')==0 && document.layers==null) ||
        (objStr.indexOf('document.all[')  ==0 && document.all  ==null))
      objStr = 'document'+objStr.substring(objStr.lastIndexOf('.'),objStr.length);
    obj = eval(objStr);
    if (obj != null) {
      swapArray[j++] = obj;
      swapArray[j++] = (oldArray==null || oldArray[j-1]!=obj)?obj.src:oldArray[j];
      obj.src = MM_swapImage.arguments[i+2];
  } }
  document.MM_swapImgData = swapArray; //used for restore
}
//-->
</script>
</head>

<body bgcolor="#000000" text="#00FF00" onLoad="MM_preloadImages('Imageaoff.jpg','#942776109600');MM_preloadImages('imagey.jpg','#942776161340')">
<div align="center">
  <table width="100%" border="0" height="299">
    <tr>
      <td width="15%">
        <table width="100%" border="0">
          <tr>
            <td>
              <div align="center"><img src="imagex.jpg" width="150" height="150" name="ImageX"></div>
            </td>
          </tr>
          <tr>
            <td>
              <div align="center"><a href="imagetest.html" onMouseOver="MM_swapImage('document.ImageA','document.ImageA','Imageaon.jpg');MM_swapImage('document.ImageX','document.ImageX','imagey.jpg','#942776161340')" onMouseOut="MM_swapImage('document.ImageA','document.ImageA','Imageaoff.jpg','#942776109600');MM_swapImage('document.ImageX','document.ImageX','imagex.jpg')"><img name="ImageA" border="0" src="Imageaoff.jpg" width="150" height="25"></a></div>
            </td>
          </tr>
          <tr>
            <td>
              <div align="center"><a href="imagetest.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('document.ImageB','document.ImageB','Imagebon.jpg')"><img name="ImageB" border="0" src="Imageboff.jpg" width="150" height="25"></a></div>
            </td>
          </tr>
          <tr>
            <td>
              <div align="center"><a href="imagetest.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('document.ImageC','document.ImageC','Imagecon.jpg')"><img name="ImageC" border="0" src="Imagecoff.jpg" width="150" height="25"></a></div>
            </td>
          </tr>
        </table>
      </td>
      <td width="85%">
        <div align="center">
          <p><b><font size="5">Testside</font></b></p>
          <p><b><font size="5">Image X( se nedenunder) skal s&aring; skifte til
            Image Y n&aring;r der bruges mouseoverfunktionen p&aring; image A/B/C.</font></b></p>
          <p><img src="imagey.jpg" width="150" height="150"></p>
          <p>Mouseoverfunktionen skal bibeholdes p&aring; image a,b og c.</p>
          <p>&nbsp;</p>
        </div>
      </td>
    </tr>
  </table>
</div>
</body>
</html>

Avatar billede manon Nybegynder
16. november 1999 - 19:44 #6
Skjoldby > Du er bare skide god !! Tak - for det virker og nu kan jeg endelig komme videre.
Avatar billede manon Nybegynder
16. november 1999 - 19:45 #7
Og så du naturligvis også bonus point !
Avatar billede skjoldby Nybegynder
16. november 1999 - 19:49 #8
Godt jeg kunne hjælpe...
Avatar billede manon Nybegynder
16. november 1999 - 19:57 #9
Er du på Icq ?
Avatar billede skjoldby Nybegynder
17. november 1999 - 10:27 #10
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