webForumDet fria alternativet

vill att en textfras ska visas samtidigt som en bild byts ut...

JavaScript

9 svar · 265 visningar · startad av macgunde

Medlem sedan apr. 2003110 inlägg
Frågan#1

Hej jag har ett problem med min hemsida...
Jag vill att när jag dra över muspekaren över en av småbilderna så ska den bytas ut mot en annan...
detta problem har jag löst genom ett JavaScript. se #1

Men samtidigt så vill jag att det ska komma fram en specifik textfras under eller över som beskriver länken...
Är det någon som kan hjälpa mig med detta?

<SCRIPT LANGUAGE="JavaScript">
    <!--    
      function visaBild (bildNamn,bildURL) {
        document[bildNamn].src=bildURL;
      }
      //-->
    </SCRIPT>
<td><a href="html/ljud.html" onMouseover="visaBild ('over_1','thumb/ljud_over_1.gif');" 
       onMouseout ="visaBild ('over_1','thumb/over_1.gif');"><img src="thumb/over_1.gif" 
       name="over_1" width="40" height="40" border="0"></a></td>
      <td><a href="#" onMouseover="visaBild ('over_2','thumb/ljud_over_2.gif');" 
       onMouseout ="visaBild ('over_2','thumb/over_2.gif');"><img src="thumb/over_2.gif" 
       name="over_2" width="40" height="40" border="0"></a></td>
      <td><a href="#" onMouseover="visaBild ('over_3','thumb/ljud_over_3.gif');" 
       onMouseout ="visaBild ('over_3','thumb/over_3.gif');"><img src="thumb/over_3.gif" 
       name="over_3" width="40" height="40" border="0"></a></td>
      <td><img src="thumb/over_4.gif" name="over_4" width="40" height="40" border="0"></td>

Tack på förhand!

--
Daniel

Medlem sedan aug. 20039 340 inlägg
#2

Du kan ju alltid använda alt="Nånting" för img-taggen.

Men jag antar att du snarare letade efter något sånt här...

Ändra skriptet till:

 
<SCRIPT LANGUAGE="JavaScript">
    <!--    
      function visaBild (bildNamn,bildURL,comment) {
        document[bildNamn].src=bildURL;
        if (comment)
          document.getElementById("comment")=comment;
        else
          document.getElementById("comment")="Placera musen över en bild...";
      }
      //-->
    </SCRIPT>

Du kallar funktionen så här.

 
<td><a href="html/ljud.html" onMouseover="visaBild ('over_1','thumb/ljud_over_1.gif','test av text');" 
       onMouseout ="visaBild ('over_1','thumb/over_1.gif');"><img src="thumb/over_1.gif" 
       name="over_1" width="40" height="40" border="0"></a>

...
<div id=comment>
Placera musen över en bild...
</div>
Medlem sedan apr. 2003110 inlägg
#3

Jag kanske skrev lite otydligt... de jag ville var att ifall jag går över en bild så ändras bilden till en ann och en beskrivande text vad länken handlar om ska komma upp... Men jag ska testa det du skrev oxå :) Tack för svaret :)

Medlem sedan aug. 20039 340 inlägg
#4

Jag kanske har gjort nåt fel i koden?
Annars gör väl koden precis det... Byter bilden precis som innan, och visar en kommentar i DIV-en (Dock är koden gjord för Internet Explorer och Opera bara...)

Annars kan du pröva ALT="Beskrivning" i IMG-taggen, då får du upp en lite ruta när du för musen över en bild.

Medlem sedan apr. 2003110 inlägg
#5

Testar alt="beskrivning" men det kommer inte upp nåt när jag för över musen...:(

Medlem sedan nov. 20017 144 inlägg
#6

Lägg in en bild så här:
<img src="bilden.gif" alt="beskrivning">
Håll musen över bilden.
Voila!

Medlem sedan apr. 2003110 inlägg
#7

<img src="../thumb/over_1.gif" alt="Uppgift 1" name="over_1" width="40" height="40" border="0">

Så här har jag skrivit, men de funkar inte...

Medlem sedan apr. 2003110 inlägg
#8

hmm jag har testat att använda alt taggen i iexplorer, safari och firebird på mac... å det funkar inte... funkar bara den taggen i pc eller?

Medlem sedan sep. 20021 655 inlägg
#9

nitro2k01 skrev:

(Dock är koden gjord för Internet Explorer och Opera bara...)

Det är enkelt att ändra så att man inte begränsar sig till IE och Opera.

document[bildNamn].src=bildURL;

skrivs istället så här:

document.images[bildNamn].src=bildURL;

http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/document.html#1226315

Medlem sedan juni 2003771 inlägg
#10

Ersätt alt med title enl. nedan.
Kanske funkar bättre.

<img src="../thumb/over_1.gif" title="Uppgift 1" name="over_1" width="40" height="40" border="0">
360 ms totalt · 4 externa anrop · v20260731065814-full.a51de22e
130 ms — deklarationer (db)
0 ms — hämta statistik (cache)
227 ms — hämta tråd, inlägg och bilagor (db)
129 ms — ändringar (db)