Foto omhoog laten komen als muis erover gaat

Status
Niet open voor verdere reacties.
Ladyke

Ladyke

Gebruiker
Lid geworden
9 okt 2010
Berichten
671
hoi,
ik wil graag een rolover link maken in mijn html code ,
is dit een beetje simpel ? want ik ken alleen de basics van html maar dus :confused:
heeft iemand een code waar ik het simpel mee zou kunnen doen ?

greetz ladyke
 
heb je een voorbeeld? voor het beeld wat ik er nu van heb ga je javascript nodig hebben, met alleen html lukt het niet
 
Als je foto in een <div> staat kan je gewoon in CSS een hover state meegeven die de foto omhoog of omlaag zet of wat je er ook voor gekkigheid mee wil laten doen.
 
het is een foto van een muzieknoot die naar een muziek bestand gaat linken
ook wil ik dit ook doen met een foto die naar een volgende pagina verwijst .
zoals naar verslagen en uitnodigingen van een activiteit

@thapriest bedankt voor je hulp maar ik ben nog niet zo ver geraakt in de coderingstaal :o . zoals jij dat zegt van die hoverstate , dat lijkt voor mij chinees :o

maar alvast bedankt
 
als ik jou was zou ik toch maar een beetje rondneuzen op deze site rondneuzen, zo heb ik het ook geleerd en ik kan nu hele webapplicaties maken

met css kan dit ook:
Code: 
div{
position: absolute;
padding-top: 10px
}

div:hover{
position: absolute;
padding-top: 2px
}

in de html ziet het er dus zo uit:
HTML: 
 <head>
  <title>hover</title>
  <style type="text/css">
      div{
      position: absolute;
      padding-top: 10px
      }

      div:hover{
      position: absolute;
      padding-top: 2px
      }
    </style>
  </head>
  <body>
   <div>
     hier<br>
     komt<br>
     dan<br>
     dat<br>
     plaatje</div>
  </body>
</html>
 
Laatst bewerkt:
Of zonder absolute positie, gewoon zo:
Wat er gebeurt:
Het nootje (of een foto) heeft een "padding" (opvulling) aan de bovenkant en de onderkant. In de normale toestand zit de vulling bovenaan, in de hover-toestand (in het chinees: de "hover state" ;) ) zit de vulling onderaan.

muzieknoot-padding.png
  • De wisseling van de padding boven en onder bij een hover wordt met css geregeld.
  • Als je niet meer hovert, springt het nootje vanzelf terug naar zijn normale toestand.
  • Door het aantal pixels (hier: 3px genomen) te veranderen springt het nootje hoger of lager bij een hover.
Met vriendelijke groet,
CSShunter
_________
PS: Hier is dus geen javascript voor nodig.
 
Laatst bewerkt:
oke bedankt , ik ga me hier de komende weken op verdiepen en ik laat jullie iets weten als het gelukt is :thumb:
nog 1 vraagie : waar moet ik dan met de css blijven ?ik heb bij webs een HTML only site gestart dus waar en hoe moet ik dat dan doen ?

Ladyke
 
Aha, ik begrijp dat je met een HTML-only site bij de broncode kan komen?
Dan zet je (net als in de broncode van het voorbeeld) de css in een stijlblokje op het eind van de <head> van de pagina:
HTML: 
<head>
... (andere dingen die in de head staan)

<style type="text/css">
img {
	border: 0; /* om geen blauwe rand te krijgen */
	}
#hovernoot img {
	padding: 3px 0 0 0;
	}
#hovernoot:hover img {
	padding: 0 0 3px 0;
	}
.center {
	text-align: center;
	}
</style>

</head>

<body>
... (enz.)
Met vriendelijke groet,
CSShunter
 
oke bedankt
ik ga hier een van de dagen mee aan de slag :)
bedankt voor je hulp en ik laat weten of het gelukt is :thumb:

Ladyke
 
je kan ook een aparte stylesheet maken, dan hoef je niet op iedere pagina dezelfde code te plaatsen maar gewoon een link naar het bestand:
HTML: 
<link href="stylesheet.css" rel="stylesheet" type="text/css"/>
een ander voordeel hiervan is dat als je één ding wilt veranderen je niet alle html bestanden af hoeft te gaan om ze te veranderen maar gewoon in het .css bestand dat ene ding veranderen
 
hoi,
kheb er een keertje mee bezig geweest maar blijkt dat ik iets anders bedoelde,
ik wou de foto omhoog laten komen dus groter bij de muisovergang.
dit was de code die ik nog heb gevonden

[HTML<a href=" http://yourwebsite.com "><img src=" IMAGE1" onmouseover="this.src=' IMAGE2 '" onmouseout="this.src=' IMAGE1 '" alt="Click Me"></a>][/HTML]

maar jullie zijn wel bedankt voor jllie hulp :)
dankje :)

ladyke
 
Laatst bewerkt:
is het nu dus opgelost?

je kunt dit ook doen met css zodat je geen 2 plaatjes nodig hebt en de site sneller laad:
de css:
HTML: 
<head>
  <title>hover</title>
  <style type="text/css">
      img{
        height:50px;
        width:50px;
      }
 
      img:hover{
        height:100px;
        width:100px;
      }
    </style>
  </head>
  <body>
   <a href=" http://yourwebsite.com "><img src="plaatje.jpg" alt="klik me"></a>
  </body>
</html>
 
oke zal eens proberen.
maar bij css snap ik niet goed waar ik de link naar het bestandje miet zetten ?

ladyke
 
je moet gewoon de normale manier gebruiken als dat je het normaal zou doen (<img src="plaatje.jpg">). het enige wat je moet doen is de stijl-regels(de css) in je html tussen de <head> tags te plaatsen:

<style type="text/css">
img{
height:50px;
width:50px;
}

img:hover{
height:100px;
width:100px;
}
</style>
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan