Archief - CSS/JS: rollover

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
K

Kust0m

Legacy Member
hi,
had een vraagje...
hoe kan je , bij een rollover de achtergrond van een cel laten veranderen en hem ook clickable maken.?

thx in advance
L

Lashknife

Legacy Member
bij een rollover de achtergrond van een cel laten veranderen en hem ook clickable maken

onmouseover="this.style.backgroundColor='blue'" onclick="function()"
backgroundColor of backgroundImage of whatever css eh :)

over het deel: en hem ook clickable maken, dat is belachelijk, want de moment dat je erover komt wil jij het enablen dat je erop kan klikken en dat er iets gebeurt, maar om ergens op te klikken moet je erover hangen, dus is dat overbodig en roep je gewoon een onclick op
D

Dece

Legacy Member
je kan je cel ook mbv css opmaken en clickable maken...

hoe het ongeveer moet:
Code: 
#menu ul
{
	margin:0px;
	padding:0px;
	display:block;
}
#menu ul li a:link, a:visited, a:active
{
	background-color: #FFFFFF;
	color:#000000;
	display:block;
	text-decoration:none;
}
#menu ul li a:hover 
{
	background-color:#3AA149;
	color:#FFFFFF;
	text-decoration:underline;
}

u html
<div id="menu">
     <ul>
           <li><a href="">item</a></li>
     </ul>
</div>

indien het niet werkt naar behoren, kijk dan gerust eens naar http://www.recyrings.be waar een werkend voorbeeld hiervan staat
b

b0bbY

Legacy Member
hmm betere titel voor deze thread lijkt mij CSS + rollover.

Niet dat het niet te doen is in JS uiteraard (zie 2 reply's hoger) maar CSS is hier de aangeweze keuze. Zeker wat betreft het veranderen van achtergrond als de cursor over je tablecell gaat.

voorbeeld hierboven is ok, maar er zijn beter manieren om in css dit effect te bekomen.

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

dit vind ik persoonlijk de beste manier. Enkel semantisch zit het daar niet helmaal goed aangezien de <div> 's die erin gebruikt worden betere alternatieven hebben. zie code onderaan deze post


Afhankelijk van de functionaliteit je aan je "klik" wilt koppelen, is JS hier helemaal niet nodig.

grtz

CSS
Code: 
<style type="text/css">
* {
	margin:0;
	padding:0;
	font-family:Arial, Helvetica, sans-serif;
}
ul#menu {
	list-style-type:none;
}
ul#menu li {
	float:left;
	background:#CAC2BA; /*of een andere bg img*/
}
ul#menu li a {
	display:block;
	background:url(menu_background.gif) repeat-x 0 0;
	height:22px;
	padding:5px 5px 2px 5px;
	text-decoration:none;
}
ul#menu li a:hover, ul#menu li a#active {
	color:#C00; 
	background:transparent;
}

-uiteraard dimensies van hoogte, padding etc vrij te kiezen op basis van uw eigen images.

HTML
Code: 
<ul id="menu">
	<li><a id="active" href="index2.html">home</a></li>
	<li><a href="index2.html">about</a></li>
	<li><a href="index2.html">services</a></li>
	<li><a href="index2.html">contact</a></li>
</ul>
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan