Archief - CSS: rollover images.

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.
B

Bram

Legacy Member
Howdy,

ik zou dit moeten bekomen: http://sunlightsaunas.com/armana-1.htm
Het gaat hem om de rollovers over cedar, basswood e.d. Ik vroeg me af of het niet mogelijk was om dat te doen met CSS, dus probeerde ik met
Code: 
<style media="screen" type="text/css">
a#1:hover #rollimg {
	background: url(../images/rollovers/armana1_1.gif) no-repeat !important;
}
a#2:hover #rollimg {
	background: url(../images/rollovers/armana1_2.gif) no-repeat !important;
}
a#3:hover #rollimg {
	background: url(../images/rollovers/armana1_3.gif) no-repeat !important;
}
a#4:hover #rollimg {
	background: url(../images/rollovers/armana1_1.gif) no-repeat !important;
}
</style>
en
HTML: 
<table class="rollover" cellspacing="0">
	<tr>
		<td><a href="#" id="1">Vooraanzicht</a></td>
		<td><a href="#" id="2">Zijaanzicht</a></td>
		<td><a href="#" id="3">Overzicht</a></td>
		<td><a href="#" id="4">Nog een aanzicht</a></td>
	</tr>
	<tr>
		<td colspan="4"><div id="rollimg" style="background: url(../images/rollovers/armana1_1.gif) no-repeat center center"></td>
	</tr>
</table>
Maar dat werkt dus niet... Is dit mogelijk met CSS? Of moet ik toch met JS gaan werken?
B

Bram

Legacy Member
k, kben het ondertss met HTML DOM aant doen, nu ik ken geen JS, dus tis een beetje met de natte vinger en ik zit hier vast:
Code: 
function changeSrc(src)
  {
  document.getElementById("rollImg").src= "../images/rollovers/" + src
  }
een link ziet er uit als
Code: 
<a href="#" onmouseover='changeSrc("armana1_1.gif")'>Vooraanzicht</a>
hoogstwaarschijnlijk gewoon ergens een ; ofzoiets vergeten, maar zoals gezegd, ik ken geen JS en vind het niet meteen...
t

tha_rippa1be

Legacy Member
rollImg != rollimg

document.getElementById("rollImg")
<div id="rollimg"

-edit-
U div word btw niet afgesloten (</div>)
en u div zult ge moeten veranderen naar een img tag he.

-edit2-
effe wat uitgetest, dit werkte:
HTML: 
<html>
	<head>
		<script language="javascript">
			function changeSrc(doelimg){
				document.getElementById("rollimg").src=doelimg
			}
		</script>
	</head>
	<body>
		<img id="rollimg" src="R.jpg" />
		<a href="#" onmouseover="changeSrc('B.jpg')">LINK</a>
	</body>
</html>
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