html - Vis billed i stedet for tekst - Udvikleren.dk - Programmering, webdesign og grafik

Tags: html javascript

Bruger #16887 @ 25.11.11 16:33

Laver en side i HTML, mangler en kode så når musen føres over teksten popper der et billed op - som forsvinder igen når musen ikke er på teksten, billeder ligger i mappan images

3 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 10 karma

Sorter efter stemmer Sorter efter dato

Bruger #15028 @ 25.11.11 16:42

Der skal du ind og kigge på Javascript events, nærmere bestemt onMouseOver og onMouseOut.

Du kan lave et stykke javascript kode, der gør et div, hvori billedet er placeret, synligt. Dette skal kaldes på onMouseOver. Så laver du et stykke kode, der skjuler den div igen. Den skal så kaldes fra onMouseOut.

Håber dette hjælper.

Bruger #13010 @ 25.11.11 17:39

440

Jeg bruger den her : http://www.walterzorn.de/en/scripts/wz_tooltip.js

Der står øverst i filen hvordan du bruger den.

For eksempel :

HTML kode

 <body>
 
 <script type="text/javascript" src="wz_tooltip.js"></script>
 
 <div id="id1" style="display:none;"><img src="images/billede1.jpg"></div>
 <div id="id2" style="display:none;"><img src="images/billede2.jpg"></div>
 <div id="id3" style="display:none;"><img src="images/billede3.jpg"></div>
 
 <p><a href="test.html" onmouseover="TagToTip('id1');" onmouseout="UnTip();">Prøv og hold musen her 1</a></p>
 <p><a href="test.html" onmouseover="TagToTip('id2');" onmouseout="UnTip();">Prøv og hold musen her 2</a></p>
 <p><a href="test.html" onmouseover="TagToTip('id3');" onmouseout="UnTip();">Prøv og hold musen her 3</a></p>
 
 </body>

Demo : http://scootergrisen.dk/test/test0097.html

Indlæg senest redigeret d. 25.11.2011 17:55 af Bruger #13010

Bruger #10216 @ 25.11.11 23:00

4.283

Du kan også vælge at bruge ren HTML/CSS:

HTML kode

 <style>
     a {
         position: relative;
     }
     a span {
         display: none;
     }
     a:hover span {
         display: block;
         position: absolute;
         top: 10px;
         left: 10px;
         border: 1px solid #ccc;
         background: #fff;
         padding: 2px;
     }
 </style>
 
 <a href="#">
     tekst
     <span><img src="..." /></span>
 </a>

Vis billed i stedet for tekst

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler