/ Forside/ Teknologi / Udvikling / HTML / Spørgsmål
Login
Glemt dit kodeord?
Brugernavn 

Kodeord  


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5106
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
Musen over tekst.
Fra : Monsen1234
Vist : 460 gange
200 point
Dato : 10-09-09 16:10

Hvordan laver man en tekst der vil komme frem ved musemarkøren når man peger på en tekst, altså hvis man sætter musen på f.eks. " Fiskeri " kommer der en lille box hvor der måske kan stå Rødspætter.

mvh: Monsen

 
 
Kommentar
Fra : Hoegh


Dato : 11-09-09 09:06

Ligesom når man holder musen over et billede, og der så kommer en tekst frem? Det hedder alt-tekst.

Accepteret svar
Fra : molokyle

Modtaget 200 point
Dato : 13-09-09 21:16

Med lidt CSS kan man lave flotte pop-up's ...uden det er pop-up's

Der findes mange løsninger, men her er een forklaret på dansk:

http://www.webdesign101.dk/css/eksempler/eksempel4.php

(Afsnittet: Inline popop)

Se flere info-baloon eksempler hér:

1.) http://www.cssplay.co.uk/menu/tool_links
2.) http://www.cssplay.co.uk/menu/balloons
3.) http://www.cssplay.co.uk/menu/pop_ups (..kun 'sparrow' virker )

..og mouse-over-tekst eksempel i quirks-mode på 'blinde link' i en menu-struktur:
Kode
<html>
<head>
<title>Menu med infobox</title>
<style type="text/css">
body {
background-color: #fcf000;
}

#menu {
width:100px;
text-align:center;
position:relative;
}
.box {
position:relative;
}
#menu a, #menu a:visited {
text-decoration:none;
background-color:#fcf000;
color:#c00;
display:block;
width:88px;
height:16px;
border:1px solid #fff;
padding:5px;
}
* html #menu a, * html #menu a:visited {
width:100px;
height:28px;
w\idth:88px;
he\ight:16px;
}
#menu a span {
display:none;
}
#menu a:hover {
border:1px solid #000;
}
#menu a:hover span.left,
#menu a:hover span.right {
display:block;
position:absolute;
height:0;
width:0;
overflow:hidden;
border-top:8px solid #fff;
border-bottom:8px solid #fff;
}
#menu a:hover span.left {
left:5px;
top:5px;
border-left:8px solid #c00;
}
#menu a:hover span.right {
left:87px;
top:5px;
border-right:8px solid #c00;
}
* html #menu a:hover span.left,
* html #menu a:hover span.right {
width:8px;
height:16px;
w\idth:0;
he\ight:0;
}
#menu a:hover span.lk {
display:block;
position:absolute;
left:120px;
top:0;
padding:5px;
width:100px;
background-color:#fff;
color:#000;
border:1px solid #234;
}
</style>
</head>
<body>
<div id="menu">
<div class="box">
<a href="#nogo">Item 1
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Description of link 1
</span>
</a>
</div>
<div class="box">
<a href="#nogo">Item 2
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Description of link 2
</span>
</a>
</div>
<div class="box">
<a href="#nogo">Item 3
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Description of link 3
</span>
</a>
</div>
<div class="box">
<a href="#nogo">Item 4
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Description of link 4
</span>
</a>
</div>
<div class="box">
<a href="#nogo">Item 5
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Description of link 5
</span>
</a>
</div>
</div>
</body>
</html>


Man behøver naturligvis IKKE formatere sin brødtekst som menu'en ovenfor. Teknikken er dog den samme ...UDEN brug af javascript

</MOLOKYLE>

Kommentar
Fra : Kenneth_dV


Dato : 14-09-09 18:33

Er det du søger et svar på hvor i koden man skriver titlen så den kommer frem når man holder musen over, eller vil du have mig til at sende dig noget hvor det allerede indgår ?
Koder HTML/CSS osv dagligt- så bar spørg :) Kan ret simpelt tilføjes koden hvori linket til evt. foto er

Godkendelse af svar
Fra : Monsen1234


Dato : 17-09-09 12:24

Tak for svaret molokyle.

Du har følgende muligheder
Eftersom du ikke er logget ind i systemet, kan du ikke skrive et indlæg til dette spørgsmål.

Hvis du ikke allerede er registreret, kan du gratis blive medlem, ved at trykke på "Bliv medlem" ude i menuen.
Søg
Reklame
Statistik
Spørgsmål : 173466
Tips : 31650
Nyheder : 719565
Indlæg : 6382375
Brugere : 218248

Månedens bedste
Årets bedste
Sidste års bedste