Необходимо изменить эффект прокрутки изображения в режиме td onclick.

Question

Я не опытный JavaScript, кодер CSS, поэтому я был бы признателен за максимально возможную помощь. Я прочитал несколько других постов для большего понимания; они упомянули jquery, но я не уверен, как это сделать.

У меня есть код, который был сгенерирован для меня с помощью программы. Мне нужно изменить около 7 кнопок изображения (не ссылки) href ролловеры в td onclick. Большое спасибо заранее. Вот мой текущий код:

В голове -

<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/[e-mail]");
    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;}

}

---

Внутри тела -

<td colspan="2">

<a href="mailto:[e-mail]"
            onmouseover="changeImages('info_savantgenius_com', 'images/[e-mail]'); return true;"
            onmouseout="changeImages('info_savantgenius_com', 'images/[e-mail]'); return true;"
            onmousedown="changeImages('info_savantgenius_com', 'images/[e-mail]'); return true;"
            onmouseup="changeImages('info_savantgenius_com', 'images/[e-mail]'); return true;">
            <img name="info_savantgenius_com" src="images/[e-mail]" width="220" height="49" border="0" alt=""></a></td>

Answer 1

Вы можете просто использовать document.getElementById() вместо документа [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];
      }
    }
}

Answer 2

Вы можете использовать это:

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

Так что это даст вам что-то вроде этого:

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

[НОВЫЙ ПУТЬ К ИЗОБРАЖЕНИЮ ЗДЕСЬ] что-то вроде этого "url('image.jpg')"

И вам нужно включить библиотеку JQuery