Forstørre billede i midten...
Hej jeg laver et galleri for min søster og vil finde ud af hvordan man laver så når musen er over billedet, kommer der en kopi af billedet i større format op på midten af skærmen. Ligesom her: http://www.dreamweaverclub.com/dreamweaver-show-larger-image.phpForstår ikke hvordan det skal laves...
html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type"
content="text/html;charset=ISO-8859-1"/>
<title>Velkommen til Jeanette's billeder.dk</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="kage">
<h1 id="overskrift">Velkommen til Jeanettes-billeder.dk</h1>
<p id="hvid"> </p>
<p id="hvid1"> </p>
<p id="hvid2"> </p>
<p id="boks"> </p>
<p id="om-mig">Her skal der stå noget om mig! Her skal der stå noget om mig! r skal der stå noget om mig! Her skal der stå noget om mig! Her skal der stå noget om mig! Her skal der stå noget om mig!s </p>
<img src="billeder/bogr.jpg" height="260px" width="300px" id="billede1" class="small" alt="brun og rød"/>
<img src="billeder/bogr.jpg" height="260px" width="300px" id="billede1stor" class="large" alt="brun og rød"/>
</div>
</body>
</html>
css: body {
background-color: #ffffcc;
}
#overskrift {
position: absolute;
top: 0px;
border-left: solid black 1px;
border-top: solid black 1px;
border-right: solid black 1px;
height: 60px;
width: 980px;
background-color: #D3D3D3;
font-size: 50px;
text-align: center;
padding-top: 0px;
margin-top: 10px;
}
#kage {
margin: 0px auto;
width: 980px;
}
#siden {
border: solid black 1px;
width: 120px;
background: #red;
height: 200px;
position: absolute;
left: 0px;
top: 67px;
}
#om-mig {
border: solid black 1px;
width: 150px;
height: 200px;
position: absolute;
left: 200px;
top: 120px;
font-size: 20px;
background-color: #FFF5EE;
}
#hvid {
margin-top: 10px;
width: 980px;
height: 7px;
background: white;
position: absolute;
top: 60px;
border: solid black 1px;
}
#hvid1 {
background: white;
position: absolute;
top: 11.32%;
left: 30.1%;
height: 85%;
width: 0.9%;
border: solid black 1px;
border-top: solid white 1px;
border-left: solid white 1px;
margin: 0.5%;
}
#hvid2 {
background: white;
position: absolute;
left: 416px;
top: 551px;
height: 8px;
width: 450px;
border: solid black 1px;
border-left: solid white 1px;
}
#boks {
background-color: #808080;
height: 400px;
width: 500px;
position: relative;
top: 67px;
left: 100px;
border: solid black 1px;
border-top: solid #808080 1px;
font-size: 1em;
}
#billede1 {
position: absolute;
left: 600px;
top: 300px;
margin-top: 10px;
}
#kage .small:hover .large {
width: 400px;
height: 400px;
margin: 0px auto;
}
#billede1stor {
margin: 0px auto;
width: 0px;
height: 0px;
}
har prøvet at få det til at virke derfor de sidste to ting...
Håber i kan hjælpe bare spørg for mere info... skal blot vide hvad i vil vide:P
Mvh Mads
