3

I am not an experienced javascript, css coder so I would appreciate as much help as possible. I've read some other posts for more understanding; they mentioned jquery but I'm not sure how to go about that either.

I have a code that was generated for me with a program. I need to change about 7 image buttons (not links) href rollovers into td onclick. Thanks so much in advance. Here is my current code:

Within the head -

<script type="text/javascript">
function newImage(arg) {
if (document.images) {
    rslt = new Image();
    rslt.src = arg;
    return rslt;}
}

function changeImages() {
if (document.images && (preloadFlag == true)) {
    for (var i=0; i<changeImages.arguments.length; i+=2) {
        document[changeImages.arguments[i]].src = changeImages.arguments[i+1];}
}

}

var preloadFlag = false;
function preloadImages() {
if (document.images) {
    info_savantgenius_com_over = newImage("images/info@savantgenius.com-over.gif");
    About_over = newImage("images/About-over.gif");
    Artist_over = newImage("images/Artist-over.gif");
    Portfolio_over = newImage("images/Portfolio-over.gif");
    Pricing_over = newImage("images/Pricing-over.gif");
    Order_over = newImage("images/Order-over.gif");
    Contact_over = newImage("images/Contact-over.gif");
    About_over033 = newImage("images/About-over-33.gif");
    Artist_over035 = newImage("images/Artist-over-35.gif");
    Portfolio_over037 = newImage("images/Portfolio-over-37.gif");
    Pricing_over039 = newImage("images/Pricing-over-39.gif");
    Order_over041 = newImage("images/Order-over-41.gif");
    Contact_over043 = newImage("images/Contact-over-43.gif");
    preloadFlag = true;}

}

Within the body - 

<td colspan="2">

<a href="mailto:info@savantgenius.com"
            onmouseover="changeImages('info_savantgenius_com', 'images/info@savantgenius.com-over.gif'); return true;"
            onmouseout="changeImages('info_savantgenius_com', 'images/info@savantgenius.com.gif'); return true;"
            onmousedown="changeImages('info_savantgenius_com', 'images/info@savantgenius.com-over.gif'); return true;"
            onmouseup="changeImages('info_savantgenius_com', 'images/info@savantgenius.com-over.gif'); return true;">
            <img name="info_savantgenius_com" src="images/info@savantgenius.com.gif" width="220" height="49" border="0" alt=""></a></td>
GregM
  • 2,634
  • 3
  • 22
  • 37
Kachi Christos
  • 51
  • 2

2 Answers2

1

You can simply use document.getElementById() instead of document[changeImages.arguments[i]]

function changeImages() {
    if (document.images && (preloadFlag == true)) {
      for (var i=0; i < arguments.length; i+=2) {
        document.getElementById(arguments[i]).src = arguments[i+1];
      }
    }
}
Pavel Podlipensky
  • 8,201
  • 5
  • 42
  • 53
  • Thank you. Again, I'm not too good at this but from reading comments online, is it possible to get rid of the href & img src tags completely and integrate one line of code into the td? – Kachi Christos Nov 08 '11 at 06:29
  • you can assign `style="background-image:..."` into `td`, so this is will be one line. But then you need to manage width and height of your `td` in order to show background image properly. – Pavel Podlipensky Nov 08 '11 at 17:32
0

You could use this :

http://api.jquery.com/hover/

So it would give you something like that : 

$("#mytd1").hover(function(){$(this).css("background-image", [PUT THE NEW IMAGE PATH HERE])});

[PUT THE NEW IMAGE PATH HERE] something like that "url('image.jpg')"

And you need to include the jquery library

GregM
  • 2,634
  • 3
  • 22
  • 37
  • Cool, will this also retain the href aspect? Also, do I place this in the header? – Kachi Christos Nov 08 '11 at 06:31
  • You could use this to remove the href : $("#mytd1").click(function(){//Your function here}); And yes you do put this in the header between – GregM Nov 08 '11 at 12:49