Help (html to css)

[WLQ]

So I have 2 images that corresponds to each other. When you mouse over any image both images changes. It's easily seen in the code. So what I need is instead of writing this script all over again, add it to css style. But I don't know how. Help me with that.

<div id="Image Number 1">
<a onmouseout="SetImage('Image Number 1','1.jpg');SetImage('Second Image','2.jpg');return false;" onmouseover"SetImage('Image Number 1','1_over.jpg');SetImage('Second Image','2.jpg');return false;"><img id="Image3" style="width: 101px; height: 24px" alt="" align="top" border="0" src="1.jpg" /></a></div>

<div id="Second Image">
<a onmouseout="SetImage('Image Number 1','1.jpg');SetImage('Second Image','2.jpg');return false;" onmouseover="SetImage('Image Number 1','1.jpg');SetImage('Second Image','2_over.jpg');return false;"><img id="Second Image" style="width: 101px; height: 10px" alt="" align="top" border="0" src="1.jpg" /></a></div>


Thanks, Yan.

[richarme]

try writing in your css file something along the lines of
a.whateveryouwant{
onmouseout="........";
onmouseover=".......";
}

then when you call the two different images on your html file:
<a class="whateveryouwant"><img src="..."/></a>

[KDLA]

You can't incorporate javascript into CSS. You can create a hover action which is similar to your javascript effect, however you cannot effect multiple regions (as in changing multiple images, not to the same image) of a page with one CSS hover action.

KDLA

[WLQ]

ok can you do this some other way in css file?

[KDLA]

No. A hover style only effects the link the cursor is passing over; it does not effect other links on the page, even if a class is applied.

[Declan1991]

You don't add it to CSS you add it to JavaScript.
<script type="text/javascript">
window.onload = function(){
var ls = document.getElementsByTagName("a"), ll = ls.length;
for (ll--;ll>=0;ll--){
if(ls[ll].className&&/(^|\s)CLASSNAME(\s|$)/.test(ls[ll].className)){
ls[ll].onmouseover = function(){
SetImage('Image Number 1','1.jpg');SetImage('Second Image','2.jpg');return false;
}
ls[ll].onmouseout = function(){
SetImage('Image Number 1','1_over.jpg');SetImage('Second Image','2.jpg');return false;
}
}
}
}
</script>
<img src="whatever" class="CLASSNAME">

You can also save this:window.onload = function(){
var ls = document.getElementsByTagName("a"), ll = ls.length;
for (ll--;ll>=0;ll--){
if(ls[ll].className&&/(^|\s)CLASSNAME(\s|$)/.test(ls[ll].className)){
ls[ll].onmouseover = function(){
SetImage('Image Number 1','1.jpg');SetImage('Second Image','2.jpg');return false;
}
ls[ll].onmouseout = function(){
SetImage('Image Number 1','1_over.jpg');SetImage('Second Image','2.jpg');return false;
}
}
}
}as whatever.js and include it like this (put this as the very last thing in your body tag.
<script type="text/javascript" src="path/to/folder/whatever.js"></script>

You can change CLASSNAME to whatever class name you want, as long as you change it in the JavaScript file and all the links you want.
That whole code presumes that it is the same for each and every link. If it's different, it's more complicated, and that would be more suited to the JavaScript forum.

[WLQ]

something is wrong with a script, it's easier then to make it in flash

[Declan1991]

Posted it in the wrong tags. This should work.
window.onload = function(){
var ls = document.getElementsByTagName("a"), ll = ls.length;
for (ll--;ll>=0;ll--){
if(ls[ll].className&&/(^|\s)CLASSNAME(\s|$)/i.test(ls[ll].className)){
ls[ll].onmouseover = function(){
SetImage('Image Number 1','1.jpg');SetImage('Second Image','2.jpg');return false;
}
ls[ll].onmouseout = function(){
SetImage('Image Number 1','1_over.jpg');SetImage('Second Image','2.jpg');return false;
}
}
}
}
If it doesn't post some of the relevant HTML as well.

[WLQ]

no it's fine I'm already making it in flash, thanks for help though