javascript - Changing both link and image for a different part of the page onmouseover -

-

could me figure out? self-taught , have little idea i'm doing.

i'm trying onmouseover event change different image on page when hovering on first part...but change url of changed image @ same time. i've found valuable information on changing image, not change out url when image changes.

specifically, i'm trying change both image displayed , url "invite_r2_c1" onmouseover. (and where, exactly) missing (it)? code right works, doesn't change url linking.

i've done backwards, code i'm working with:

<tr> <td><span onmouseover="document.images['invite_r2_c1'].src='images/invite_r2_c1_00b.jpg';" onmouseout="document.images['invite_r2_c1'].src='images/invite_r2_c1_00b.jpg';" onclick="document.images['invite_r2_c1'].src='images/invite_r2_c1_00b.jpg';" ><img name="invite_r1_c1" src="images/invite_r1_c1.gif" width="269" height="644" id="invite_r1_c1" alt="" /></span></td> <td><span onmouseover="document.images['invite_r2_c1'].src='images/invite_r2_c1_01.gif';" onmouseout="document.images['invite_r2_c1'].src='images/invite_r2_c1_01b.jpg';" onclick="document.images['invite_r2_c1'].src='images/invite_r2_c1_01b.jpg';" ><img name="invite_r1_c2" src="images/invite_r1_c2.gif" width="105" height="644" id="invite_r1_c2" alt=""></span></td> <td><span onmouseover="document.images['invite_r2_c1'].src='images/invite_r2_c1_02.gif';" onmouseout="document.images['invite_r2_c1'].src='images/invite_r2_c1_02b.jpg';" onclick="document.images['invite_r2_c1'].src='images/invite_r2_c1_02b.jpg';" ><img name="invite_r1_c3" src="images/invite_r1_c3.gif" width="99" height="644" id="invite_r1_c3" alt="" /></span></td> <td><span onmouseover="document.images['invite_r2_c1'].src='images/invite_r2_c1_03.gif';" onmouseout="document.images['invite_r2_c1'].src='images/invite_r2_c1_03b.jpg';" onclick="document.images['invite_r2_c1'].src='images/invite_r2_c1_03b.jpg';" ><img name="invite_r1_c4" src="images/invite_r1_c4.gif" width="102" height="644" id="invite_r1_c4" alt="" /></span></td> <td><span onmouseover="document.images['invite_r2_c1'].src='images/invite_r2_c1_04.gif';" onmouseout="document.images['invite_r2_c1'].src='images/invite_r2_c1_04b.jpg';" onclick="document.images['invite_r2_c1'].src='images/invite_r2_c1_04b.jpg';" ><img name="invite_r1_c5" src="images/invite_r1_c5.gif" width="100" height="644" id="invite_r1_c5" alt="" /></span></td> <td><span onmouseover="document.images['invite_r2_c1'].src='images/invite_r2_c1_05.gif';" onmouseout="document.images['invite_r2_c1'].src='images/invite_r2_c1_05b.jpg';" onclick="document.images['invite_r2_c1'].src='images/invite_r2_c1_05b.jpg';" ><img name="invite_r1_c6" src="images/invite_r1_c6.gif" width="101" height="644" id="invite_r1_c6" alt="" /></span></td> <td><span onmouseover="document.images['invite_r2_c1'].src='images/invite_r2_c1_00b.jpg';" onmouseout="document.images['invite_r2_c1'].src='images/invite_r2_c1_00b.jpg';" onclick="document.images['invite_r2_c1'].src='images/invite_r2_c1_00b.jpg';" ><img name="invite_r1_c7" src="images/invite_r1_c7.gif" width="274" height="644" id="invite_r1_c7" alt="" /></span></td> <td><img src="images/spacer.gif" width="1" height="644" alt="" /></td> </tr> <tr> <td colspan="7"><a href=link1.htm><img name="invite_r2_c1" src="images/invite_r2_c1_00.gif" width="1050" height="406" id="invite_r2_c1" alt="" /></a></td> <td><img src="images/spacer.gif" width="1" height="406" alt="" /></td> </tr>

going tidy things bit you. first of all, create reusable function called changeimageandurl() reusable instead of dumping raw js html.

for html part change hover images like:

//i'm not going repeat every image here, giving example 1 <td><span onmouseover="changeimageandurl('images/invite_r2_c1_00b.jpg','link2.html')"><img name="invite_r1_c1" src="images/invite_r1_c1.gif" width="269" height="644" id="invite_r1_c1" alt="" /></span></td>

i removed ommouseout , onclick event because seem same thing onmouseover, in case need latter.

add id link want change:

<td colspan="7"><a id="invite_r2_c1_link" href=link1.htm><img name="invite_r2_c1" src="images/invite_r2_c1_00.gif" width="1050" height="406" id="invite_r2_c1" alt="" /></a></td>

now in js part:

function changeimageandurl(img, link) {      document.getelementbyid('invite_r2_c1').src = img;      document.getelementbyid('invite_r2_c1_link').href = link; }

Comments

Post a Comment

Popular posts from this blog

Delphi XE2 Indy10 udp client-server interchange using SendBuffer-ReceiveBuffer -

-
i use delphi xe2 , indy10 udp protocol. can't receive server echo on client side if use receivebuffer method. got "socket error # 10040" although send small echo message server client. console application illustrate problem below. in advance. program project1; {$apptype console} {$r *.res} uses system.sysutils, idglobal, idbasecomponent, idcomponent, idsockethandle, idudpclient, idudpserver, idudpbase, idstack; type tudp_serv = class(tidudpserver) procedure udpsvudpread(athread: tidudplistenerthread; adata: tidbytes; abinding: tidsockethandle); end; var udpserver: tudp_serv; udpcl: tidudpclient; bsnd, brcv: tbytes; s: string; k: integer; //============================================================================== procedure tudp_serv.udpsvudpread(athread: tidudplistenerthread; adata: tidbytes; abinding: tidsockethandle); begin writeln(' server read: ' + tohex(adata, length(adata))); abinding sendto(peerip, peerport, adat...
Read more

Qt ActiveX WMI QAxBase::dynamicCallHelper: ItemIndex(int): No such property in -

-
i new windows programming. here goes code objiwbemlocator = new qaxobject("wbemscripting.swbemlocator"); objwmiservice = objiwbemlocator->querysubobject("connectserver(qstring&,qstring&)",qstring("."),qstring("root\\cimv2")); qaxobject* returnlist = objwmiservice->querysubobject("execquery(qstring&)", qstring("select * %1").arg(domain)); qaxobject* result = returnlist->querysubobject("itemindex(int)", 0); i getting error on runtime qt activex wmi qaxbase::dynamiccallhelper: itemindex(int): no such property in but itemindex method exists msdn says the itemindex method not work collections not contain swbemobjects, such swbemmethodset, swbemnamedvalueset, swbemprivilegeset, swbempropertyset, , swbemqualifierset. what selecting ? have tried iterating on collection ? plus need minimum windows vista itemindex method. hope helps
Read more

Enable autocomplete or intellisense in Atom editor for PHP -

-
i'm first time user of atom editor php code. atom can autocomplete built-in functions of php. possible make editor autocomplete custom function written in separate file? function.php <?php function printsomething() { echo "hello world"; } index.php <?php require_once "function.php"; printsomething(); // autocompleted atom editor while typing thanks in advance. there text file in %userprofile%.atom called snippets.cson. in there can add snippet. more this: http://flight-manual.atom.io/using-atom/sections/snippets/ but need think can use later on other files well. otherwise need copy , paste.
Read more