onmouseover

Her kan du stille og svare på spørgsmål omkring CSS
Besvar
Søren47
Begynder
Indlæg: 1
Tilmeldt: 4. aug 2012, 21:13

onmouseover

Indlæg af Søren47 » 4. aug 2012, 21:23

Hej
Først vil jeg sige at jeg er helt ny i css programmering. Men jeg har brugfor hjælp til onmouseover funktionen. Jeg har lavet følgende css fil.

Kode: Vælg alt

#wrapper {
    
    width: 715px;
    height: 1500px;
    border:0px solid ;
  border-bottom-left-radius:8px;
  border-bottom-right-radius:8px;
  border-top-left-radius:8px;
  border-top-right-radius:8px;
    position: absolute;
        left: 50%;
    margin-left: -500px; 
}
.Video{
    width:179px;
    height: 179px;
    border:1px solid #CCCCCC ;
  border-bottom-left-radius:8px;
  border-bottom-right-radius:8px;
  border-top-left-radius:8px;
  border-top-right-radius:8px;
    position: absolute;
    margin-top:5px;
    margin-left:510px;
}
.header1 {
    
    width: 700px;
    height: 190px;
    border:1px solid #CCCCCC;
  border-bottom-left-radius:8px;
  border-bottom-right-radius:8px;
  border-top-left-radius:8px;
  border-top-right-radius:8px;
    position: absolute;
    margin-left:5px;
    margin-right:5px; 
    margin-top:5px;
    margin-bottom:5px;
    
}
ul {
    list-style-type: none;
    width: 600px;
    font-family: verdana;
    font-size: 12px;
    font-weight: normal;
    
    
}
.li2 {
    list-style-type: none;
    width: 600px;
    font-family: verdana;
    font-size: 12px;
    line-height: 150%;
    font-weight: normal;
}
.li3 {
    list-style-type: none;
    width: 600px;
    font-family: verdana;
    font-size: 12px;
    line-height: 150%;
    font-weight: normal;
}

        
       
.indhold1 {
    
    width: 226px;
    height: 400px;
    border:1px solid #CCCCCC;
  border-bottom-left-radius:8px;
  border-bottom-right-radius:8px;
  border-top-left-radius:8px;
  border-top-right-radius:8px;
    position: absolute;
    margin-left:5px;
    margin-right:5px; 
    margin-top:5px;
    margin-bottom:5px;
    left: 0px;
    top: 200px;
}
.indhold2 {
    
    width: 226px;
    height: 400px;
    border:1px solid #CCCCCC;
  border-bottom-left-radius:8px;
  border-bottom-right-radius:8px;
  border-top-left-radius:8px;
  border-top-right-radius:8px;
    position: absolute;
    margin-left:5px;
    margin-right:5px; 
    margin-top:5px;
    margin-bottom:5px;
    left: 236px;
    top: 200px;
}
.indhold3 {
    
    width: 226px;
    height: 400px;
    border:1px solid #CCCCCC;
  border-bottom-left-radius:8px;
  border-bottom-right-radius:8px;
  border-top-left-radius:8px;
  border-top-right-radius:8px;
    position: absolute;
    margin-left:5px;
    margin-right:5px; 
    margin-top:5px;
    margin-bottom:5px;
    left: 472px;
    top: 200px;   
}
.Header2 {
    
    width: 700px;
    height: 240px;
    border:1px solid #CCCCCC;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
    position: absolute;
    margin-left:5px;
    margin-right:5px; 
    margin-top:5px;
    margin-bottom:5px; 
    left:0px;
    top: 611px;
}
.indhold4 {
    
    width: 226px;
    height: 400px;
    border:1px solid #CCCCCC;
  border-bottom-left-radius:8px;
  border-bottom-right-radius:8px;
  border-top-left-radius:8px;
  border-top-right-radius:8px;
    position: absolute;
    margin-left:5px;
    margin-right:5px; 
    margin-top:5px;
    margin-bottom:5px;
    left: 0px;
    top: 865px;
    font-size: 14px;
}
.indhold5 {
    
    width: 226px;
    height: 400px;
    border:1px solid #CCCCCC;
  border-bottom-left-radius:8px;
  border-bottom-right-radius:8px;
  border-top-left-radius:8px;
  border-top-right-radius:8px;
    position: absolute;
    margin-left:5px;
    margin-right:5px; 
    margin-top:5px;
    margin-bottom:5px;
    left: 236px;
    top: 865px;
}
.indhold6 {
    
    width: 226px;
    height: 400px;
    border:1px solid #CCCCCC;
  border-bottom-left-radius:8px;
  border-bottom-right-radius:8px;
  border-top-left-radius:8px;
  border-top-right-radius:8px;
    position: absolute;
    margin-left:5px;
    margin-right:5px; 
    margin-top:5px;
    margin-bottom:5px;
    left: 472px;
    top: 865px;   
}
.Header3 {
    
    width: 700px;
    height: 240px;
    border:1px solid #CCCCCC;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
    position: absolute;
    margin-left:5px;
    margin-right:5px; 
    margin-top:5px;
    margin-bottom:5px; 
    left:0px;
    top: 1275px;
}
.P {
    margin-top: 220px; 
    margin-left: 10px;
    margin-right: 10px;
    font-family: "verdana";
    font-size: 12px;
    line-height: 15px;
}
.h2{
font-size: 18px;
margin-left: 10px;
font-family: Verdana;
color: #20a220;
}
.bestil {
    width: 100px;
        height: 30px;
        font-size: 22px;
    color: #FF0000;
    font-weight: bold;
    padding-left: 5px;
    padding-top: 5px;
            background-color: #FF0;
        border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
    position: absolute;
    top: 355px;
    left: 63px;
  box-shadow:4px 5px 2px rgba(0, 0, 0, 0.2);
    
}
.pakker {
     width:210px;
     height: 30px;
     font-size: 22px;
     
    color: #FFF;
    Padding-left:5px;
    padding-top:5px;
     background-color: #20a220;
       border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
    position: absolute;
    top: 10px;
    left: 6px;  
}
.billed {
    width: 210px;
    height: 150px;
    background-image: url(c:/HTML/guardsman.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    border:1px solid #20a220;
     border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
    top: 60px;
    left:6px;
  position: absolute;
      
}
.billed2 {
    width: 210px;
    height: 150px;
    background-image: url(c:/HTML/1241.jpg);
    
    background-repeat: no-repeat;
    background-position: center center;
    border:1px solid #20a220;
     border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
    top: 60px;
    left:6px;
  position: absolute;}
.billed3 {
    width: 210px;
    height: 150px;
    background-image: url(c:/HTML/CTC1916.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    border:1px solid #20a220;
     border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
    top: 60px;
    left:6px;
  position: absolute;
}
.billed4 {
    width: 210px;
    height: 150px;
    background-image: url(c:/HTML/PK-1132s.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    border:1px solid #20a220;
     border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
    top: 60px;
    left:6px;
  position: absolute;
}
.billed5 {
    width: 210px;
    height: 150px;
    background-image: url(c:/HTML/918.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    border:1px solid #20a220;
     border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
    top: 60px;
    left:6px;
  position: absolute;
}
.billed6 {
    width: 210px;
    height: 150px;
    background-image: url(c:/HTML/foto.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    border:1px solid #20a220;
     border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
    top: 60px;
    left:6px;
  position: absolute;
}

.pris{
    margin-top: 20px; 
    margin-left: 50px;
    margin-right: 50px;
    width: 140px;
    font-family: "verdana";
    font-size: 18px;
    font-weight: bold;
    position: absolute;
    top:300px; 
    }
    
        
a:link {
    color: #FF0000;
    font-size: 22px;
    text-decoration: none;
    font-weight: bold;

}
a:visited {
    color: #FF0000;
    text-decoration: none;
}
a:hover {
    color: #FF0000;
    text-decoration: none;
}
a:active {
    color: #FFF;
}
og følgende html

Kode: Vælg alt

<div id="wrapper">
          
          <div class="header1"> 
              <div class="video"> <video width="180" height="180" controls="controls" autoplay="autoplay">
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="180" height="180">
    <embed width="180" height="180" src="movie.swf" />
  </object>
</video></div>

              <p class="h2">Tyverialarmer til private boliger</p>
              <ul>
            <li class="ul">Private Alarmer forhandler flere forskellige former for moderne trådløse<br> og effektive tyverialarmer, som kan overvåge boligen døgnet rundt.</li>
            <li class="li2">Stort udvalg i tilbehør til alarmsystemerne. </li>
        <li class="li3">Du kan få alarm med eller uden abonnement. </li>
              </ul>
          </div>  
           
           <div class="indhold1">               
               <div class="billed"></div>
               <div class="pakker">Guardsman 1132 GSM</div>
               <div class="p"> Flot og funktionel alarmsystem i hvidt design.<br><br>Alarmsystem klar til montering.<br><br></div>
              <div class="pris"> 5.295,00 kr.</div>
              <div class="bestil">Læs mere</div>
           </div> 
           
            <div class="indhold2">
          <div class="pakker"> Guardsman 1241 GSM</div>
          <div class="billed2"></div>
          <div class="p"> Alarmsystem klar til montering.<br></div>
              <div class="pris"> 6.895,00 kr.</div>
          <div class="bestil">Læs mere</div>
            
            </div>
           
           <div class="indhold3">
          <div class="pakker">Guardsman fotoalarm</div>
          <div class="billed3"></div>
           <div class="p"> Alarmsystem klar til montering.<br></div>
              <div class="pris"> 3.695,00 kr.</div>
          <div class="bestil">Læs mere</div>
           </div> 
           
             <div class="Header2">
                 <p class="h2"> Sammemsæt selv din Guardsman tyverialarm</p>
              <ul>
            <li class="ul">Du kan her vælge selv at sammensættte dit Guardsman alarmsystem, sådan at det dækker dine krav til sikring af boligen.</li>
            <li class="li2">Du kan vælge følgende Guardsman modeller:<br>Guardsman CTC <a href="http://www.privatealarmer.dk/index.php/basis-alarmpakke-houseguard-tradlos-gsm-model-1132.html" target="_blank"> 1132</a> GSM<br>Guardsman CTC 1142 CTC GSM<br>Guardsman 1241 CTC GSM<br>Guardsman CTC 1916 GSM Fotoalarm</li>
        <li class="li3">Du vælger ved at klikke på ovenstående modeller og tilbehør til alarmpanelerne vælger du under det enkelte alarmpanel "under relaterede produkter".</li>
              </ul>
          </div>
          
           <div class="indhold4">
            <div class="pakker"> HouseGuard Basis</div>
               <div class="billed4"></div>
               <div class="p"> Alarmsystem klar til montering.<br></div>
              <div class="pris"> 3.695,00 kr.</div>
               <div class="bestil">Læs mere</div>
          </div> 
           
            <div class="indhold5">
            <div class="pakker">HouseGuard Plus</div>
                <div class="billed5"></div>
                <div class="p"> Alarmsystem klar til montering.<br></div>
              <div class="pris"> 3.695,00 kr.</div>
                <div class="bestil">Læs mere</div>
          </div>
           
           <div class="indhold6">
            <div class="pakker">HouseGuard Fotoalarm</div>
               <div class="billed6"></div>
               <div class="p"> Alarmsystem klar til montering.<br></div>
              <div class="pris"> 3.695,00 kr.</div>
               <div class="a, bestil"> <a href="http://www.privatealarmer.dk/index.php/fotoalarm-houseguard-pro-gsm-tradlos-tyverialarm.html">Læs mere</a></div>
          </div> 
           
           <div class="Header3">
                <p class="h2">Sammemsæt selv din HouseGuard tyverialarm</p>
              <ul>
            <li class="ul">Du kan her vælge selv at sammensættte dit HouseGuard alarmsystem, sådan at det dækker dine krav til sikring af boligen.</li>
            <li class="li2">Du kan vælge følgende Guardsman modeller:<br>HouseGuard<a href="http://www.privatealarmer.dk/index.php/basis-alarmpakke-houseguard-tradlos-gsm-model-1132.html" target="_blank"> Basis</a> GSM<br>HouseGuard Plus GSM<br>HouseGuard Pro GSM Fotoalarm</li>
        <li class="li3">Du vælger ved at klikke på ovenstående modeller og tilbehør til alarmpanelerne vælger du under det enkelte alarmpanel "under relaterede produkter".</li>
              </ul>
           
           </div>
           </div>
        


</body>

Jeg vil gerne at når man holder musen over et af billederne kommer der "den velkendte tekst gule boks", dels skal den kunne læses af kunderne og ikke mindst søge robotterne. Jeg kunne selvfølgelig skrive under hvert billede hvad det det viser, men for at minimere pladsen ser jeg flere fordele i "onmouseover" funktionen.

Jeg beklager hvis der er formeget kode med, men det er for bedre at kunne forklare hvad jeg mener.

Med venlig hilsen
Søren
Top
Brugeravatar
Pennywise
Entusiast
Entusiast
Indlæg: 43
Tilmeldt: 25. okt 2013, 17:35

Re: onmouseover

Indlæg af Pennywise » 18. nov 2013, 22:58

Slet ingen der vil hjælpe den stakkels mand her :-)

Umildbart tænker jeg at det er en hover effekt du leder efter. Med min korte erfaring kan en hover effekt f.eks være 2 billeder hvorved at der skiftes til det andet billede når man holder musen over det ønskede område.

Da du gerne vil beholde det orginale billede men bare tilføje en tekst kan du simpelthen lave 2 af det første billede ( kopier ) og smide tekst på nummer 2 som så bliver synlig når musen holdes over. Måske ikke den bedste løsning men det kan være det giver blod på tanden til at lære om hover effekten og måske enda bringer nogle svar fra nogle af de andre medlemmer her. Billede nummer 2 kan evt "fades" lidt så selve billedet ikke står så skarpt så man bedre ligger mærke til teksten på billedet.

Det er det nærmeste svar jeg kan komme da den velkendte gule boks ikke er så velkendt alligevel da jeg ikke aner hvad du mener der :)

Det kan godt tænkes jeg er helt ude på et sidespor her men fik nu alligevel lyst til at være lidt kreativ så prøv at køre musen hen over det billede der er på siden her:

http://ptcthatpays.com/NemProgrammering/Gul_Boks.html
Top
Besvar

Tilbage til "CSS"