|
|
 | 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>
| |
|
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 |
| | |
 | 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.
| |
|
|