Ik heb onderstaande code voor mijn website. Nu zit ik alleen met een vraag, namelijk:
Hoe kan ik ervoor zorgen dat de container een kleur rollover krijgt ?
Alvast bedankt !!
http://www.plaatscode.be/3682/
798 views
Niemand een idee ? Was eigenlijk in de veronderstelling dat ik niet de enige zou zijn met dit probleem...
Hiervoor niet je een javascript gebruiken?
onMouseOver: this.class.change
Zoiets was het in ieder geval..
onMouseOver: this.class.change
Zoiets was het in ieder geval..
Dacht zoiets ook maar kan niks vinden wat echt werkt.
zie mss het topic OnMouseOver image
voorbeeld
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
function init () {
var c = document.getElementById ('container');
c.onmouseover = function () {
return handle_mouseover (this);
}
c.onmouseout = function () {
return handle_mouseout (this);
}
}
function handle_mouseover (obj) {
obj.style.backgroundColor = '#f00';
}
function handle_mouseout (obj) {
obj.style.backgroundColor = '#0f0';
}
// koppel de functie init aan het onload event van het window object
window.onload = init;
</script>
<style type="text/css">
#container {
background: #0f0;
}
</style>
</head>
<body>
<div id="container">
<h1>Koptekst</h1>
<p>Alineatekst, Alineatekst, Alineatekst, Alineatekst, Alineatekst</p>
</div>
</body>
</html>
In je voorbeeld werkt hij inderdaad prima. Maar ik krijg nu de volgende foutmelding (onderaan staat zo'n uitroepteken) :
'null' is geen opject of leeg.
dit is de regel van
c.onmouseover = function () {
'null' is geen opject of leeg.
dit is de regel van
c.onmouseover = function () {
Heb je wel een element met id="container" in je HTML?
Nope, maar had dit al gewijzigd. Alles is nu zo :
<script type="text/javascript">
function init () {
var c = document.getElementById ('container_occasions');
c.onmouseover = function () {
return handle_mouseover (this);
}
c.onmouseout = function () {
return handle_mouseout (this);
}
}
function handle_mouseover (obj) {
obj.style.backgroundColor = '#f00';
}
function handle_mouseout (obj) {
obj.style.backgroundColor = '#0f0';
}
// koppel de functie init aan het onload event van het window object
window.onload = init;
</script>
.container_occasions{
width: 600px;
padding: 0px;
background: #0f0;
}
.float_occasions1 {
float: left;
width:120px;
text-align: center;
margin: 0px;
padding: 0px;
cursor: pointer;
}
<div class="container_occasions"><?php
print("<a href='occasions_geheel.php?id=". $auto1['id'] ."'>");
?>
<div class="float_occasions1"><? echo ("" . $auto1['merk'] . ""); ?></div>
<div class="float_occasions2"><? echo ("" . $auto1['model'] . ""); ?></div>
<script type="text/javascript">
function init () {
var c = document.getElementById ('container_occasions');
c.onmouseover = function () {
return handle_mouseover (this);
}
c.onmouseout = function () {
return handle_mouseout (this);
}
}
function handle_mouseover (obj) {
obj.style.backgroundColor = '#f00';
}
function handle_mouseout (obj) {
obj.style.backgroundColor = '#0f0';
}
// koppel de functie init aan het onload event van het window object
window.onload = init;
</script>
.container_occasions{
width: 600px;
padding: 0px;
background: #0f0;
}
.float_occasions1 {
float: left;
width:120px;
text-align: center;
margin: 0px;
padding: 0px;
cursor: pointer;
}
<div class="container_occasions"><?php
print("<a href='occasions_geheel.php?id=". $auto1['id'] ."'>");
?>
<div class="float_occasions1"><? echo ("" . $auto1['merk'] . ""); ?></div>
<div class="float_occasions2"><? echo ("" . $auto1['model'] . ""); ?></div>
Het is toevallig net met geheel CSS gelukt. Allemaal bedankt voorde geboden hulp !
heb je ook gebruik in ie nagekeken?