onmouseover pic change

Status
Niet open voor verdere reacties.
Example5

Example5

Terugkerende gebruiker
Lid geworden
9 mrt 2008
Berichten
2.172
hey...

weet iemand toevallig hoe je in javascript een onmouseover picture change maakt? dus als je de muis niet op een knop staat is het picture1.png en als ie er wel op staat is het picture2.png....

tot nu toe doe ik het met een html code maar meerdere mensen zeggen dat het niet werkt...

http://www.regadev.com/ hier het voorbeeld van wat ik heb...

als iemand een betere manier weer kan diegene dit dan posten? een javascript bijvoorbeeld...

bedankt voor de eventuele hulp...

mvg
 
Het makkelijkst is om het gewoon met CSS te doen:

Code: 
#IDvanJeButton {
  background: url(aboutbut.png);
}

#IDvanJeButton:hover {
  background: url(aboutbutomo.png);
}

Maar als je het dan toch met javascript wilt doen, kan dat zo:

HTML: 
<a href="index.htm">
  <img 
    border="0" 
    name="aboutbut" 
    src="btnbg/aboutbut.png"
    onmouseover="this.src='aboutbutomo.png'" 
    onmouseout="this.src='aboutbut.png'" 
  >
</a>
 
hmm die javascript moet tussen <script> tags? die css doet het niet bij mij :S
correctie: hij doet het wel, maar ik vind hem een beetje omslachtig
 
Laatst bewerkt:
Dat script is gewoon inline, kun je zo plaatsen waar eerst je <a> met je <img> erin stond.

Om die css te laten werken, moet je aan de <a> het volgende toevoegen:

HTML: 
id="IDvanJeButton"

en dan moet je de img die je erin gezet hebt eruit, en dan moet je aan dat stukje css eigenlijk ook nog width: {xx}px; height: {yy}px; toevoegen, waarbij je {xx} vervangt door de breedte van 't plaatje, en {yy} door de hoogte van 't plaatje.
 
heel mooi het werkt, nog 2 dingetjes :P

1. weet je misschien hoe ik de spaties tussen de pics krijg :$?

2. zou je ff kunnen kijken of ze het bij jou ook doen :P?
www.regadev.com < okee bij mij laat hij het in preview wel zien, maar geupload niet :S


tot zover heel erg bedankt xD
 
Laatst bewerkt:
Nee, het werkt hier niet.

Maar je HTML klopt nu ook geen drol van.

Al die <p>'s kunnen wel weg. Als je ze niet weg wilt doen, moet je ze op z'n minst afsluiten met een </p>.

Je body een class geven is ook nooit nodig.

Maak van:

Code: 
.slo #aboutbut {

eens:

Code: 
#menu #aboutbut {

en zo ook voor de rest.
 
ja dat heb ik gedaan maar het resultaat is niet echt naar wens:

www.3747.eu < zie hier

:S wat deed ik fout :P? (sorry dat ik deze ff gebruik maar die andere site is down :S)
 
Laatst bewerkt:
Over je CSS:

Regel 11: .slo weghalen
Regel 13: align moet zijn text-align

De width en height mogen bij elke :hover weg.
 
ik heb hem weer veranderd, maar hij geeft hem niet weer... :P

www.3747.eu

doet ie niet :/
 
Laatst bewerkt:
Hij geeft nu in ieder geval de grijze balk weer, dat is een vooruitgang ;)

Als je die <p> nou nog eens weghaalt, en bij elke button in de CSS display: block toevoegt ?
 
we hebben vooruitgang, de buttons hebben nu wel het probleem dat ze bij de eerste keer mouseover een korte tijd niets weergeven (laden duurt lang) hoe kan dat iets flexibeler :$?... en ze staan boven elkaar ipv naast elkaar xD


we gaan vooruit :D:D xD

sorry voor zoveel vragen btw maar het lukt niet echt xD

www.3747.eu / www.regadev.com

overigens moeten de buttons ook ongeveer in het midden van het grijze vak staan (dus niet helemaal bovenaan :P)
 
Laatst bewerkt:
Geeft niks, ik was er ook nog even mee bezig. Je zult er nog float: left aan toe moeten voegen (alle drie, in de normal state).

Dan voeg je dit toe aan de CSS:

Code: 
#inside {
  left:50%;
  margin-left:-147px;
  margin-top:100px;
  position:absolute;
  width:294px;
}

En dan zet je óm de drie links:

HTML: 
<div id="inside">
<!-- Hier dus de links -->
</div>
 
ja maarrrrrr ik wil ze relatief hebben... dus niet in pixel maar in procent.. kan dat ook?
het moet namelijk even hoog zijn voor elke resolutie beeldscherm en formaat scherm etccc

is het misschien een idee om dit te gebruiken:
<body onload="MM_preloadImages('plaatjes',...........) ; loadTime()">

?

als preload zodat ze niet blank gaan?
 
Dit is relatief (soort van :P) ze staan nu altijd in het midden.

[EDIT]
Had je post nog niet helemaal gelezen :P

Zo'n dreamweaver functie om images te preloaden bent ik nooit fan van.

Ik zou het dan zo doen:

HTML: 
<div style="display: none">
  <img src="padnaarjebafbeelding" alt="Preloaded" /> <!-- Dit voor elke afbeelding die je wilt preloaden -->
</div>
[/EDIT]
 
Laatst bewerkt:
Je bent de eerste regel van m'n post van 22:16 vergeten :P

En er moeten nog puntkommas na block ;)
 
okee super hij werkt :D:D hij blijft ook netjes int midden... miss nog een idee om de spaties tussen de buttons te krijgen :D?


ps let maar niet op me preload lines, die kort ik nog wel in ;)
 
Voeg aan de eerste twee div's in de CSS het volgende toe:

Code: 
margin-right: 10px; // of hoeveel je er tussen wilt

Dan wijzig je bij #inside het volgende:

aan width voeg je twee keer de hoeveelheid toe die je als margin-right hebt opgegeven (bijv 20px).

Van margin-left trek je één keer de hoeveelheid af die je als margin-right hebt opgegeven (bijv -10px).
 
okee kijk zo komen we ergens, volgens mij werkt alles nu prima.

bedankt voor alle hulp :D:D misschien ben ik binnenkort weer terug met zon k*tvraag LOl :P

thanks :D
 
Prima, ik vind 't wel leuke vraagjes. 't Scheelt dat jij 't snel toepaste en we niet dagen of weken op een reactie hoeven wachten, om te weten of het gelukt is.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan