Pellekaart
Gebruiker
- Lid geworden
- 25 jun 2012
- Berichten
- 48
dag helpmij.nl-forum,
Voor mijn website wil ik mijn rollover aanpassen zodat de ''hoover'' niet de actieve AP-elementen overlappen.
Nu werken de rollover(afbeeldingen) wel maar als je de items dicht bij elkaar plaatst dan overlappen de ''hoover''-items(zegmaar de balonnen) de AP-elementen (de te scrollen woorden).
Dit is waarschijnljk op te lossen door de ''hoover'' te splitsen in twee elementen? (antwoord-woord en tekstballon)
Je hebt dan zegmaar 3 rollover-elementen
1) scoll-item (vraag)
2a) antwoord
2b) tekstballon
Hoe zou je dit nu goed kunnen maken in Dreamweaver?
Ik zou graag de rollover willen hebben binnen de externe stylesheet.
http://robertheemskerk.nl/testsite.html
HTML:
Externe Stylesheet:
Suggesties en opmerkingen zijn welkom!
groeten Robert
Voor mijn website wil ik mijn rollover aanpassen zodat de ''hoover'' niet de actieve AP-elementen overlappen.
Nu werken de rollover(afbeeldingen) wel maar als je de items dicht bij elkaar plaatst dan overlappen de ''hoover''-items(zegmaar de balonnen) de AP-elementen (de te scrollen woorden).
Dit is waarschijnljk op te lossen door de ''hoover'' te splitsen in twee elementen? (antwoord-woord en tekstballon)
Je hebt dan zegmaar 3 rollover-elementen
1) scoll-item (vraag)
2a) antwoord
2b) tekstballon
Hoe zou je dit nu goed kunnen maken in Dreamweaver?
Ik zou graag de rollover willen hebben binnen de externe stylesheet.
http://robertheemskerk.nl/testsite.html
HTML:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>image sprite</title>
</head>
<link href="testsite.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
</script>
<div id="logo"></div><!--end image-sprite-->
<div id="watmaakik"></div><!--end image-sprite-->
<div id="wiebenik"></div><!--end image-sprite-->
<div id="inspiratie"></div><!--end image-sprite-->
<div id="vorm"></div><!--end image-sprite-->
<div id="contact"></div><!--end image-sprite-->
</head>
</html>
Code:
@charset "UTF-8";
#logo
{
background:url(logo.png);
width:399px;
height: 87px;
top: 10px;
position: absolute;
z-index: 1;
}
#watmaakik
{
width:182px;
height:37px;
top: 300px;
position: absolute;
z-index: 1;
left: 50px;
background-image: url(watmaakik-1.png);
background-repeat: no-repeat;
}
#watmaakik:hover {
width:225px;
height:40px;
background-image: url(watmaakik-2a.png);
position: absolute;
top: 297px;
left: 47px;
background-repeat: no-repeat;
}
#wiebenik
{
width:182px;
height:37px;
top: 400px;
position: relative;
background-image: url(wiebenik-1.png);
float: left;
left: 250px;
z-index: 2;
background-repeat: no-repeat;
}
#wiebenik:hover
{
width:469px;
height:267px;
background-image: url(wiebenik-2.png);
position: absolute;
top: 220px;
left: 250px;
}
#inspiratie
{
width:279px;
height:66px;
top: 550px;
position: absolute;
background-image: url(Inspiratie.png);
float: left;
z-index: 2;
left: 800px;
background-repeat: no-repeat;
}
#inspiratie:hover
{
width:500px;
height:468px;
background-image: url(Inspiratie2.png);
position: absolute;
top: 350px;
left: 800px;
cursor: auto;
background-repeat: no-repeat;
}
#vorm
{
width:469px;
height:119px;
top: 300px;
position: absolute;
background-image: url(Vorm1.png);
left: 500px;
background-repeat: no-repeat;
}
#vorm:hover
{
width:469px;
height:267px;
background-image: url(Vorm2.png);
position: absolute;
top: 152px;
left: 500px;
cursor: crosshair;
}
#contact
{
width:92px;
height:30px;
top: 250px;
position: absolute;
background-image: url(contact1.png);
left: 500px;
background-repeat: no-repeat;
}
#contact:hover
{
width:469px;
height:267px;
background-image: url(contact2.png);
position: absolute;
top: 50px;
left: 500px;
cursor: default;
}
/* CSS Document */
body {
background-color: #F30;
background-image: url(cirkel.png);
background-repeat: no-repeat;
background-position: 200px 50px;Suggesties en opmerkingen zijn welkom!
groeten Robert
Laatst bewerkt door een moderator:
Die kan geen images lezen, dus alles wat op de pagina staat gaat aan Google voorbij. Er zijn geen woorden, er zijn geen trefwoorden, helemaal niets... Dat zal geen hoge score opleveren, want Google moet het van teksten hebben.
