Hi, i'm new here.. just wanted to ask a quick question...

I've tried about 2 forms of javascript and 1 form of css to try this...

On my forum I want to have the images roll over, BUT... the thing is, when you refer to the same instance of the image, it'll cancel everything out... As in a forum, how it'll have a button that shows "PM" on it for private message. Well in the tpl file you just setup the basic layout and it'll repeat for every reply. So anyways, is there a way to use the same 2 images (one as mouseout and mouseover) repeatedly throughout the same page? I can't understand how to make it work...

With different text on? Thats a background rollover. Heres a quick example;

<p style="background-image:URL('pic1.jpg');" id="rollOver1" onmouseover='rollOver1.style.backgroundImage="URL(\'pic2.jpg\');";' onmouseout='rollOver1.style.backgroundImage="URL(\'pic1.jpg\');";'>Test</p>

ok now say that's in a tpl form, so.. like the database would read that tpl file and say, this is the layout for each post "name, post, button", if there's 15 posts all on the same page, it's going to load that code that you posted 15 times.. will that work using the same 2 images?

yes. But to be more efficient, you may want a function.

<script language="Javascript">
function rollOverMe(object_id) {
     if(document.getElementById) {
            document.getElementById(object_id).style.backgroundImage="URL('pic2')";
    } else if(document.all) {
            document.all[object_id].style.backgroundImage="URL('pic2')";
    }
     return;
}

function rollOffMe(object_id) {
      if(document.getElementById) {
            document.getElementById(object_id).style.backgroundImage="URL('pic1')";
    } else if(document.all) {
            document.all[object_id].style.backgroundImage="URL('pic1')";
    }
     return;
}
</script>
<p style="background-image:URL('pic1.jpg');" id="rollOver1" onmouseover='rollOverMe("rollOver1");' onmouseout='rollOffMe("rollOver1");'>Test</p>

<p style="background-image:URL('pic1.jpg');" id="rollOver2" onmouseover='rollOverMe("rollOver2");' onmouseout='rollOffMe("rollOver2");'>Test</p>

<p style="background-image:URL('pic1.jpg');" id="rollOver3" onmouseover='rollOverMe("rollOver3");' onmouseout='rollOffMe("rollOver3");'>Test</p>

Originally Posted by webwoRRks

<p style="background-image:URL('pic1.jpg');" id="rollOver1" onmouseover='rollOverMe("rollOver1");' onmouseout='rollOffMe("rollOver1");'>Test</p>

<p style="background-image:URL('pic1.jpg');" id="rollOver2" onmouseover='rollOverMe("rollOver2");' onmouseout='rollOffMe("rollOver2");'>Test</p>

<p style="background-image:URL('pic1.jpg');" id="rollOver3" onmouseover='rollOverMe("rollOver3");' onmouseout='rollOffMe("rollOver3");'>Test</p>

The code for each rollover couldn't be made unique as it is generated by the forum script, not by hand. You'd probably have to do something involving the 'this' object, so javascript knows which image you mean without using IDs.

Rufo.

thanks for the help the two of you.. i'll try and figure this one out.