Using the DOM to ammend CSS attributes

liunx

Guest
editedfor anyone who's interested I worked it out - syntax was a bit iffy for the bg image value.

<html>
<body>

<p><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" onClick="{ /*Misc CSS attributes and values*/
var attrib=document.getElementById('anID');
attrib.style.color='#ff0000';
attrib.style.border='1px solid #000000';
attrib.style.backgroundImage='url(someImg.jpg)';
}">Some Link</a>

<div id="anID">test</div>

</body>
</html>should basically make me a slide show

<html>
<body>
<style type="text/css">
#lp1{width:50px;height:50px;background-image:url(image-1.jpg);}
</style>

<script type="text/javascript">
num = 1
function iChange(i){
num+=i;
img = "image-" + num + ".jpg"
alert(num)
}
</script>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" onClick="{
if(num > 1){
iChange(-1);
var ss = document.getElementById('lp1');
ss.style.color='#ff0000';
ss.style.border='1px solid #000000';
ss.style.backgroundImage='url(' + img + ')';
}
}">Back</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" onClick="{
if(num < 3){
iChange(1);
var ss = document.getElementById('lp1');
ss.style.color='#ff0000';
ss.style.border='1px solid #000000';
ss.style.backgroundImage='url(' + img + ')';
}
}">forward</a>

<div id="lp1">test</div>

</body>
</html>

I'm a bit worried about compatibility though. Obviously it's not going to happen on people's computers if they have javaScript turned off, but are there any other compatibility issues I should be aware of?
 
Back
Top