javascript rollover image - (how) can I set css styles for onmouseover image?
newbie here so pls be patient :)
I have an image (Image#1) which开发者_运维技巧 is aligned against the far left of the page (all body padding and margins set to 0) and have added some rollover javascript so a new image (Image#2) appears in its place on mouseover. Image#2 is larger than Image#1.
At the moment, on mouseover Image#2 appears but is not aligning far left against the page (the default page margins seem to have been re-introduced and body CSS rules ignored).
Is there anyway of applying an ID to Image#2 so I can control the CSS styles for it? Or any other way of removing the margin which appears on mouseover? Basically I would like the 2 images to overlap at the far left corner.
Help much appreciated. Thanks!
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
$('img#id').mouseover(function(){
$(this).css("property","value");
});
it requires jQuery..
//////////////////////////////////////////////////////////////////////////////////////
var elem = document.getElementById("id"); //your img id is passed in here
elem.onmouseover= function(){
this.style.yourPropertiesInCamelCase = "value";
}
////////////////////////////////////////////////////////////////////////////////////// P.S.: You can google camelCase if you don't know what it is... Be careful with css properties in "pure" Javascript. There are possible browser inconsistencies... Your code can become not crossbrowser...
Did you concider...
<script type="text/javascript">
function changeImage() {
document.getElementById("theImg").src = "other.gif";
}
</script>
<img src="/myImage.gif" id="theImg" onmouseover="changeImage()" />
You might use a with fixed dimensions and 0-paddings and add the images inside it. It might work? Not sure.
Anyway, to do roll-over, you need to change the "src" attribute of the initial image. The rest should remain the same.
Better to use the anchor hover state in CSS to swap out a background image instead of using javascript for something so simple. Also you should make the images one image so that you can load them at one time and just change the background position on hover...
http://jsfiddle.net/k36am/
加载中,请稍侯......
精彩评论