Archief - CSS: image over

Elysium · 7 jul 2005

Ik hoorde hier gisteren zeggen dat het veel makkelijker en cleaner is van een change image on mouse over te maken met CSS ipv JavaScript..nu, ik ken noppes van CSS, maar heeft iemand daar soms de geschikte code voor liggen en es een snel woordje van hoe die te plaatsen?

Zero Grav · 7 jul 2005

http://wellstyled.com/css-nopreload-rollovers.html Searchfunctie

Lashknife · 7 jul 2005

makkelijker en cleaner... gewoon "alternatief" is voldoende

met css ipv javascript... evenzeer javascript, het enige dat eigenlijk wijzigt is dat je slechts 1 image van positie shift ipv 2 images om te wisselen.

voordeel: loadtime 2de image was soms zichtbaar waardoor je een vertraagde swap kreeg en ook als je snel over meerdere swaps gaat krijg je delays

nadeel van css aanpak: onlangs nog op irc over gehad over een onverklaarbare lag bij sommigen en bij sommigen dan weer niet... al iemand die hier een fix voor heeft gevonden ondertussen? want kweet ook niet meer wat de oorzaak/oplossing hiervoor was

Elysium · 7 jul 2005

Ok, maar ik zit met een menu met een 7-tal .jpg's waar ik een image-swap moet voor hebben..kheb er al 3 van inet geplukt maar ze werken blijkbaar niet, dus dacht ik van eventueel dan CSS te gebruiken..

Iemand soms de exacte code (die wat makkelijker te gebruiken is?)

Obliv` · 7 jul 2005

euhm de link van zero grav niet gezien???

ge hebt dus 2 img's

<a id="link1" href="link1.html">link1</a> is de link

in uw css dan
a#link1
{
background-images: url(xxx);
}

a#link1:hover
{
background-images: url(xxx_hover);
}

Elysium · 7 jul 2005

Dus dien id is gewoon een naam geven, niet?

Dan a#link1, daar geef ik dezelfde naam op, background-images: url(xxx); hier de url naar die .jpg en hetzelfde voor de hover..en dat 7 maal copiëren?

Elysium · 7 jul 2005

Dat is bvb de eerste link die ik wil maken:

<style type="text/css">
a#link1
{
background-images: url(images/menu_home.jpg);
}

a#link1:hover
{
background-images: url(images/menu_home_over.jpg);
}
</style>

dan de .jpg zelf:

<a id="link1" href="home.html"><img src="images/menu_home.jpg" width="100" height="22" alt="" border="0"></a>

Zero Grav · 7 jul 2005

Liever iets zoals dit:

<style type="text/css">
a#link1
{
background-images: url(images/menu_home.jpg);
width: 50px; height: 10px; display: block; /* De width & height moet je aanpassen aan die van je menu_home image... Dit zijn gewoon voorbeeldwaardes */
}

a#link1:hover { background-images: url(images/menu_home_over.jpg); }

a#link1 span { display: none; } /* Om bij het niet laden van de stylesheet toch nog een duidelijke clickable te krijgen */
</style>

dan de .jpg zelf:

<a id="link1" href="home.html"><span>Home</span></a>

Elysium · 7 jul 2005

Bekijk het es, want er klopt iets niet ze bro! Als ik die code er in steek, is door de <span> mijn .jpg verdwenen..

Hier kan je es zien wat ik juist bedoel..

Zero Grav · 7 jul 2005

We zitten hier niet in de 'west-side' dus laat die 'bro' maar lekker achterwege.

Het fijne aan deze methode is dat je eigenlijk geen afbeelding hebt om op te klikken. Het is gewoon 'lucht' bij wijze van spreken. Je klikt op een hotspot.. de ACHTERGRONDAFBEELDING van die hotspot is de afbeelding...

Daardoor, 'k zal't nog maar eens zeggen, zet je geen afbeelding in de link maar enkel een tekst die je onzichtbaar maakt.

In je css zorg je dan dat die afbeelding als achtergrond wordt ingesteld.

Elysium · 7 jul 2005

Zero Grav zei:
We zitten hier niet in de 'west-side' dus laat die 'bro' maar lekker achterwege.

omfg een mens mag nog niet eens meer vriendelijk doen!! Blijkbaar is de sfeer op Teleslet nog altijd dezelfde als vroeger...
Kzal je toch maar bedanken voor je hulp, maar als ik nog es iets wil weten zal ik het verdomd vast en zeker hier niet meer vragen!!!

Bertold · 7 jul 2005

hmm niet zo op reageren het kwam idd wat raar over en daarbij heeft hij u toch wel goed geholpen lijkt mij?

Elysium · 7 jul 2005

Je kan het op een andere manier zeggen lijkt me, dan zo lekker uit de hoogte te doen!

En het werkt niet, mja niet iedereen kan natuurlijk er alles van af weten hé

Zero Grav · 7 jul 2005

Dat ik iets tegen domme negertaal heb heeft niets te maken met het feit dat je geen xhtml/css kan. Don't act so offended.

Bertold · 7 jul 2005

Probeer het zo eens : (je moet wel die bg en bg_hover vervangen door de images die jij gebruikt) en de link enzo je weet wel.

Code:

/* CSS Document */

a.link {
			position: absolute;
			background-image:url(bg.jpg);
			background-repeat:no-repeat;
			top: 10px;
			left: 10px;
			width: 100px;
			height: 30px;
			display: block;
			}

a.link:hover {
			position: absolute;
			background-image:url(bg_hover.jpg);
			background-repeat:no-repeat;
			top: 10px;
			left: 10px;
			width: 100px;
			height: 30px;
			display: block;
			}

en dit als (x)html

Code:

<html>
<head>
<link rel="stylesheet" type="text/css" href="opmaak.css">
</head>
<body>
<a href="home.html" class="link">home</a>
</body>
</html>

Laat weten als het werkt.

EDIT: de css staat hier wel extern omdat ik altijd zo werk ge kunt hem ook intern zetten maar daar houd ek mij nie mee bezig moet je zelf maar uitzoeken als je het zo gemakkelijkr vind

Elysium · 7 jul 2005

Nope gaat niet

Ik heb dus het volgende gedaan:

In de <head>

<style TYPE="text/css">
a.link {
position: absolute;
background-image:url(menu_home.jpg);
background-repeat:no-repeat;
top: 10px;
left: 10px;
width: 100px;
height: 30px;
display: block;
}

a.link:hover {
position: absolute;
background-image:url(menu_home_over.jpg);
background-repeat:no-repeat;
top: 10px;
left: 10px;
width: 100px;
height: 30px;
display: block;
}
</style>

Maar wat moet ik dan juist doen met die html code? Moet ik die in de tabel zetten waar mijn .jpg's staan of heb ik het verschrikkelijk bij het verkeerde eind?? Djeez, hoe geraken jullie hier wijs uit?

Obliv` · 7 jul 2005

bekijk de post van bt belgium boven de uwe

in uw html heb je geen img tags meer nodig omda je img's al in je css staan
uw html code is identiek die dat bt belgium heeft gegeven!!

Fr3aK · 7 jul 2005

Ma manne toch, als ge met een andere image werkt om ne rollover te verkrijgen gade in IE het *******-effect krijgen.
Doe het zo eens (afmetingen kloppen niet):

Code:

a {
  width: 100px;
  height: 25px;
  display: block;
  background-image: url("image.jpg");
  background-position: 0 0; /* positie van de image: 0px 0px */
}

a:hover {
  width: 100px;
  height: 25px;
  display: block;
  background-image: url("image.jpg");
  background-position: 0 25px; /* positie van de image: 0px 25px */
}

Zoals ge ziet verschuift de image, nu moet ge gewoon die image dubbel zo hoog maken en de het rollover effect onderaan je gewone image plakken...

Elysium · 7 jul 2005

Nu heb ik dat (zonder CSS of JS):

<td width="100" background="images/4_4.jpg">
<img src="images/menu_home.jpg" width="100" height="22" alt="" border="0"><img src="images/menu_biography.jpg" width="100" height="26" alt="" border="0"><img src="images/menu_pictures.jpg" width="100" height="24" alt="" border="0"><img src="images/menu_gigs.jpg" width="100" height="24" alt="" border="0"><img src="images/menu_lyrics.jpg" width="100" height="24" alt="" border="0"><img src="images/menu_demo.jpg" width="100" height="23" alt="" border="0"><img src="images/menu_links.jpg" width="100" height="25" alt="" border="0"><img src="images/menu_guestbook.jpg" width="100" height="24" alt="" border="0"><img src="images/menu_contact.jpg" width="100" height="22" alt="" border="0"><img src="images/menu_bottom.jpg" width="100" height="49" alt="" border="0"></td>

Dus concreet..wat moet ik in de head zetten en wat in die <td></td>?
Dat is de tabel met die menu-jpg's erin..

Check hier het menu es, en de bedoeling is, dat als je erover gaat met de muis, die rode letters wit worden dus dezelfde jpg's met _over achter. Die heb ik beiden gemaakt.

Obliv` · 7 jul 2005

Obliv` zei:
bekijk de post van bt belgium boven de uwe

in uw html heb je geen img tags meer nodig omda je img's al in je css staan
uw html code is identiek die dat bt belgium heeft gegeven!!

doe zelf toch ook is wa moeite...
ik quote mezelf niet voor de lol ze

Archief - CSS: image over

Elysium

Legacy Member

Zero Grav

Legacy Member

Lashknife

Legacy Member

Elysium

Legacy Member

Obliv`

Legacy Member

Elysium

Legacy Member

Elysium

Legacy Member

Zero Grav

Legacy Member

Elysium

Legacy Member

Zero Grav

Legacy Member

Elysium

Legacy Member

Bertold

Legacy Member

Elysium

Legacy Member

Zero Grav

Legacy Member

Bertold

Legacy Member

Elysium

Legacy Member

Obliv`

Legacy Member

Fr3aK

Legacy Member

Elysium

Legacy Member

Obliv`

Legacy Member