Avatar billede mr_y Nybegynder
16. juni 2007 - 12:26 Der er 9 kommentarer og
2 løsninger

mouseover picture

Hej eksperter

Jeg har en side med produkter. Hvor hvert produkt har et billed og en tekst.

Jeg har forsøg mig med mouseover and mouse out men det virker fint på billed 1 men der er jo mange produkter.

Helt simpelt
Hvordan laver jeg en mouseeover på de andre billeder
vær sød at give mig alt teksten.

jeg bruger en tabel til at holde billed og tekst adskildt

Tabellen ser således ud
<table width="400" border="1">
        <tr>
          <td width="100" height="162"><img src="img/Produkter/Eikendal/small/cabsau02.jpg" width="100" height="142" /></td>
          <td width="424">Vin beskrivelse 1 </td>
        </tr>
        <tr>
          <td height="146"><img src="img/Produkter/Eikendal/small/brut.jpg" width="100" height="142" /></td>
          <td>Vinbeskrivelse 2 </td>
        </tr>
        <tr>
          <td>Billed 3 </td>
          <td>Vinbeskrivelse 3 </td>
        </tr>
        <tr>
          <td>Billed 4 </td>
          <td>Vinbeskrivelse 4 </td>
        </tr>
        <tr>
          <td>osv</td>
          <td>osv</td>
        </tr>
        <tr>
          <td>osv</td>
          <td>osv</td>
        </tr>
      </table>

er der en smartere måde at lave det på og mere simpel ?
kom med forslag "venligst med koden :)
Avatar billede ziron Nybegynder
16. juni 2007 - 12:52 #1
en måde er at lave det i javascript : prøv google det meget smart :)
http://www.webdevelopersnotes.com/tips/html/changing_two_images_on_mouse_over_using_javascript.php3
Avatar billede ziron Nybegynder
16. juni 2007 - 12:56 #2
Avatar billede guffey Nybegynder
16. juni 2007 - 14:02 #3
altså skla alle billederne skifte når man har musen over billede 1 ?
Eller er det kun det billede som man har musen hen over som skal skifter ?
Avatar billede mr_y Nybegynder
16. juni 2007 - 17:10 #4
det er kun billed 1
Avatar billede roenving Novice
17. juni 2007 - 02:40 #5
Hvad er det, der skal skiftes ?-)

-- er det teksten, der hører til billedet, er det selve billedet, eller er det f.eks. et stort billede, der skal vises (f.eks. med teksten til ?-)
Avatar billede mr_y Nybegynder
17. juni 2007 - 09:25 #6
Ok her kommer en mere fyldens gørende beskrivelse.

Kør musen over Teksten her for at se en beskrivelse og et billed.

det vil sige at når man kører musen over et link så kommer der i en box 1 et billed og i Box 2 en beskrivelse.

Nå man så flytter musen over link 2 så forsvinder indholdet af box 1 og 2 , det bliver nu udskiftet af et nyt billed i box 1 og en ny tekst i box 2.


Tænkte det skulle se sådanne ud.

LINK1 : LINK2 : LINK3: LINK4:



BOX 1                                          BOX 2




Side SLUT

Håber det er lidt mere fyldes gørende.
MR_y
Avatar billede ziron Nybegynder
17. juni 2007 - 11:55 #7
Så kunne det evt se sådan her ud:

<html>
<head>
  <title>Udskiftning af billeder - Over links</title>
 
  <SCRIPT LANGUAGE="JAVASCRIPT">
<!--

function roll(img_name1, img_src1, img_name2, img_src2)
  {
  document[img_name1].src = img_src1;
  document[img_name2].src = img_src2;
  }

//-->
</SCRIPT>
</head>
<body>
  <div align="center">
  <table width="400" border="1">
        <tr>
          <td width="100" height="50">
            <A href=""
            onmouseover="roll('image_1', 'vin1.png', 'image_2', 'b1.png')"
            onmouseout="roll('image_1', 'tom.png', 'image_2', 'tom.png')">
              Link 1
            </A>
          </td>
          <td width="100" height="50">
            <A href=""
            onmouseover="roll('image_1', 'vin2.png', 'image_2', 'b2.png')"
            onmouseout="roll('image_1', 'tom.png', 'image_2', 'tom.png')">
              Link 2
            </A>
          </td>
          <td width="100" height="50">
            <A href=""
            onmouseover="roll('image_1', 'vin3.png', 'image_2', 'b3.png')"
            onmouseout="roll('image_1', 'tom.png', 'image_2', 'tom.png')">
              Link 3
            </A>
          </td>
          <td width="100" height="50">
            <A href=""
            onmouseover="roll('image_1', 'vin4.png', 'image_2', 'b4.png')"
            onmouseout="roll('image_1', 'tom.png', 'image_2', 'tom.png')">
              Link 4
            </A>
          </td>
        </tr>
        <tr>
          <td height="200" width="200" colspan="2">
            <img src="tom.png" name="image_1" border="0">
          </td>
          <td height="200" width="200" colspan="2">
            <img src="tom.png" name="image_2" border="0">
          </td>
        </tr>
      </table>
  </div>
</body>
</html>

se det her : http://www.com8.dk/eksperten.dk/udskiftningafbilleder/udskiftning%20af%20billeder%20-%20over%20links.html

Mark
Avatar billede roenving Novice
18. juni 2007 - 00:15 #8
Og sådan kan du være sikker på, at den i hvert fald virker nogle år:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Vis billede og tekst</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;font-family:tahoma,verdana,arial,sans-serif;font-size:small;}
#site{width:864px;margin:0 auto;}
#site ul,#site li{display:inline;}
#site li img{width:53px;height:37px;}
#site td{font-size:22px;font-weight:bold;}
</style>
<script language="javascript" type="text/javascript">
  function showDesc(elm){
    document.getElementById("visBillede").firstChild.setAttribute("src", elm.getAttribute("src").replace(/\.gif/i,".jpg"));
    document.getElementById("visBeskrivelse").firstChild.nodeValue = elm.getAttribute("alt");
  }
</script>
</head>
<body>
  <div id="site">
    <ul>
      <li><img src="vin1.gif" alt="Denne vin fra Alsace giver rigtige gode fornemmelser, server den kølig til f.eks. en skinke-menu" title="vin1, Alsace" onmouseover="showDesc(this);"></li>
      <li><img src="vin2.gif" alt="En rigtig god Bordeaux, som altid giver gode minder til et godt måltid" title="vin2, Bordeaux" onmouseover="showDesc(this);"></li>
      <li><img src="vin3.gif" alt="Skal du prøve noget eksotisk er denne australske vin et godt bekendtskab ifølge med en god bøf" title="vin3, Australien" onmouseover="showDesc(this);"></li>
    </ul>
    <table>
      <tr>
        <td id="visBillede"><img src="etBilledeFraEnVinmark.jpg" style="width:350px;height:288px;"></td>
        <td id="visBeskrivelse">&nbsp;</td>
      </tr>
    </table>
  </div>
</body>

</html>
Avatar billede mr_y Nybegynder
18. juni 2007 - 14:14 #9
roenving kom med et svar og jeg deler point mellem jer to.

Takker for de fine forslag, Så nu skal jeg bare igang med at sætte det ind på min side.
Avatar billede roenving Novice
18. juni 2007 - 14:36 #10
Velbekomme '-)
Avatar billede roenving Novice
19. juni 2007 - 22:19 #11
-- og jeg takker for point ;~}
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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