Plaatje Hover

Status
Niet open voor verdere reacties.
5

555Martijn

Gebruiker
Lid geworden
15 jun 2008
Berichten
163
(dunno of dit in HTML of CSS of w/e moet, sorry als verkeerde forum is mods)

Ik wil graag een hover op me plaatje, voorbeeldje:

HTML: 
<td><a href="#" target="_blank" rel="nofollow"><img src="images/providers/telfort.png" border="0" alt="Telfort opwaarderen" /></a></td>

en als je er overheen hover moet het plaatje "naamvanplaatje_h" ik heb van alle telecom aanbieders twee plaatje, één normaal en ééntje voor hover met _h erachter, hoe kan ik dit het makkelijkst doen?

Help is erg gewaardeerd!
 
De css zal er zo uitzien:

a:hover {
background-image: url('images/test.png');
}

Dit zal het moeten doen.
 
Mmja,
... als het img uit de html ook naar de css gepromoveerd wordt, anders zie je waarschijnlijk weinig van die wisselende achtergrond. ;)
Als ik niets vergeet, wordt het dan in de css
Code: 
[FONT="Courier New"][SIZE="2"]a#telfort {
     width: ..px; /* breedte v/h plaatje opgeven */
     height: ..px; /* hoogte v/h plaatje opgeven */
     border: 0; /* anders knalblauwe rand van 2px */
     background: url(images/providers/telfort.png);
}
a#telfort:hover, a#telfort:focus {
     background: url(images/providers/telfort_h.png);
}[/SIZE][/FONT]
en in de
HTML: 
<td><a id="telfort" href="#" target="_blank" rel="nofollow"></a></td>
Met vriendelijke groet,
CSShunter
 
peter vazed zei:
Zwiep
onMouseOver img
in google.
En dan kom je onderhande hier:
http://www.joriso.nl/verhaaltjes-webdevelopment-mouseover.html
terecht.

Kan met javascript of css.

:cool:
Klik om te vergroten...
illxjoey zei:
De css zal er zo uitzien:

a:hover {
background-image: url('images/test.png');
}

Dit zal het moeten doen.
Klik om te vergroten...

Dan zal het wel lukken voor 1 image, maar ik heb er een stuk of 32 :/

csshunter zei:
Mmja,
... als het img uit de html ook naar de css gepromoveerd wordt, anders zie je waarschijnlijk weinig van die wisselende achtergrond. ;)
Als ik niets vergeet, wordt het dan in de css
Code: 
[FONT="Courier New"][SIZE="2"]a#telfort {
     width: ..px; /* breedte v/h plaatje opgeven */
     height: ..px; /* hoogte v/h plaatje opgeven */
     border: 0; /* anders knalblauwe rand van 2px */
     background: url(images/providers/telfort.png);
}
a#telfort:hover, a#telfort:focus {
     background: url(images/providers/telfort_h.png);
}[/SIZE][/FONT]
en in de
HTML: 
<td><a id="telfort" href="#" target="_blank" rel="nofollow"></a></td>
Met vriendelijke groet,
CSShunter
Klik om te vergroten...

Zelfde, word het voor ~32 images niet ongelofelijk veel code? :p
Oh en werkte niet :p

Is het niet mogelijk met PHP ofzo? Ik ken totaal geen php maar misschien een variable zoals %provider% en dan voor hover %provider_h%? ik heb geen flauw idee :p
 
Zelfde, word het voor ~32 images niet ongelofelijk veel code? :p
Klik om te vergroten...
Je zal toch ergens die vindplaatsen van de gewone en de hover-images moeten opgeven. :p
Maar het kan sterk vereenvoudigd worden door alle images in 1 (één) plaatje op te nemen! Dan hoef je met css alleen de achtergrond-positie te veranderen bij een andere provider (en hetzelfde voor hoveren), en niet steeds een nieuwe image-vindplaats op te geven. Scheelt ook de inlaad-tijd voor 63 images. :)

Oh en werkte niet :p
Klik om te vergroten...
Oeps, dat kan kloppen. Was inderdaad inderhaast iets vergeten: als een link alleen maar een achtergrond heeft (en geen link-tekst), moet met {display:block} opgegeven worden dat de hele opgegeven breedte en hoogte van de <a> getoond moet worden. Sorry!
Als dat erbij gezet wordt, gaat het goed.
  • Voorbeeld van wat ik bedoel. Zie broncode voor tips! :)

Is het niet mogelijk met PHP ofzo?
Klik om te vergroten...
Het zou ook wel met javascript kunnen, dan kan je wat css-code uitsparen met een functie. Maar aan de andere kant zal er dan in de html bij elke provider weer een onmouseover="..." en een onmouseout="..." bij gezet moeten worden, en ik denk dat dat al met al niet minder code of minder werk oplevert.
Bovendien: bezoekers met uitgeschakeld javascript zien niets aan verandering, maar kunnen wel van pure css-hovers genieten.

Met vriendelijke groet,
CSShunter
 
csshunter zei:
J
Voorbeeld van wat ik bedoel. Zie broncode voor tips! :)
Klik om te vergroten...

Oh, dit ga ik proberen!
Wel alleen dan voor 1 image, omdat ik er nog text etc ook bij heb, thanks!

K, heb nu dit:
telfort2.png


HTML: 
<td><a id="telfort" href="/provider.php?s=telfort" target="_blank" rel="nofollow"><img src="images/providers/telfort2.png" border="0" alt="Telfort opwaarderen" /></a></td>
HTML: 
a#telfort { background-position: 0 0; }
a#telfort:hover, 
a#telfort:focus { background-position: -30px 0; }

Hoort het te doen toch?
(mischien is -30px niet goed, maar vogel ik later wel uit)
 
Laatst bewerkt:
Met javascript lekker een image-swap functie maken joh! Als je wilt (en niet de andere oplossing gebruikt) wil ik wel even kijken of ik een algemene functie kan schrijven zodat je niet voor elke image apart iets hoeft toe te voegen.
 
Vegras zei:
Met javascript lekker een image-swap functie maken joh! Als je wilt (en niet de andere oplossing gebruikt) wil ik wel even kijken of ik een algemene functie kan schrijven zodat je niet voor elke image apart iets hoeft toe te voegen.
Klik om te vergroten...

Dat zou echt helemaal top zijn!
 
Hoi Martijn,
Hoort het te doen toch?
Klik om te vergroten...
Nop, want hier zit er een voorgrond-img in de html, die de achtergrond-img afdekt. Dan kan je de achtergrond-img opschuiven wat je wilt, maar dan zie je daar niets van.
  1. òf je hebt 2 achtergrond-images die je met een css-hover laat wisselen (resp. 1 dubbel achtergrond-img dat je met een css-hover laat opschuiven),
  2. òf je hebt twee voorgrond-images die je met javascript laat swappen,
  3. òf je hebt 1 achtergrond-img en 1 voorgrond-image, waarbij je met javascript het voorgrond-img weghaalt als je er over hovert (en weer terugzet als je ervandaan hovert).
Maar ik heb via het andere draadje je pagina gezien, en dat maakt het in de css een stuk makkelijker! :)
  • òf je kan met 1 wisselende background-img volstaan (de "schakelaar"), als je de afbeeldingen van de providers als transparante images in de voorgrond neerzet; dit is dus eigenlijk een variant van optie 1.
Je kunt ook mooi van de tabel afkomen door de plaatjes/links als list-items in de html neer te zetten. Dan kunnen de onderschriften meteen bij het bijbehorende plaatje gezet worden, en bij hoveren over het plaatje (of over het onderschrift zelf) van kleur verschieten: hier kan geklikt worden.
Als je de alt="..." teksten in de html vervangt door dezelfde teksten in een title="..." in de <a> (en er telkens een lege alt="" in in de <img> in laat staan voor betere validatie), dan kunnen mensen met een andere browser dan Internet Explorer (en met IE8) ook de toelichtende gele tooltips zien als je over de links hovert.

Ik merkte trouwens dat het lettertype "Century Gothic" in Firefox (en evt. andere browsers, niet getest) de eigenaardigheid heeft (op mijn WinXPpro kast bij resolutie 1280x1024) om bij kleine lettergrootten een pixel extra naar beneden in te nemen als de tekst vet wordt gemaakt. Dat betekent verspringen van de eronder liggende rijtjes met plaatjes, en niet zo fraai. Met gebruik van de "Trebuchet MS", die er erg op lijkt, is dat niet zo.
  • Kortom: zie hier, het bovenste rijtje is de css-hover (eronder zit de tabel zoals is was)
Wat nog moet gebeuren in deze opzet: transparante logo'tjes van 100x100px aanmaken van de providers die onder de bovenste vier staan; en de html aanpassen met de nieuwe list-items; dan kan de hele tabel geschrapt worden. De css hoeft niets aan te veranderen! :)

Zo kunnen dingen soms opeens wel eens makkelijker worden in plaats van ingewikkelder. Dat mag ik wel! :D

Met vriendelijke groet,
CSShunter
 
Hoi Martijn,
Dat heb je snel voor de bakker! :)
Paar dingetjes op dit moment:
  • Bij Qick zit het img tmobile.gif i.p.v. qick.gif
  • Onderaan in de Welkom-regel staat per ongeluk beletegoedindex.nl
  • In de 3 stappen eronder kan je de tekst mooi uitlijnen met een <ol></li> lijstje ("ordered list", d.w.z. met nummers).
HTML: 
<ol>
     <li>Op de plaatjes hierboven of ... enz. </li>
     <li>Na het klikken op een ... enz. </li>
     <li>Vervolgens kunt u ... enz. </li>
</ol>
En tenslotte: in de html heb je steeds tussen de rijtjes staan:
HTML: 
     ... eind rijtje
</ul> 
<ul id="providers"> 
     ... nieuw rijtje
Ik denk dat je die net zo goed ertussen uit kunt halen, want alle list-items <li> hebben een float:left opdracht. Als een rijtje vol is gaat de volgende <li> uit zichzelf naar beneden, er links onder.
Alternatief is: van de id="providers" een class="providers" maken, en in de css #providers {...} vervangen door .providers {...}; een puntje i.p.v. het hekje. Want id's mogen maar één keer op een pagina voorkomen, en classes kunnen hergebruikt worden.

Met vriendelijke groet,
CSShunter
 
Nogmaals bedankt! :).
punt 2 had ik nog niet gezien, en 3 ook niet :p.

Dank!
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan