...

View Full Version : minor document.getElementById() question -- should be an easy problem to solve :D



canadianjameson
05-29-2004, 01:31 AM
i'm trying to modify a liorean script provided here... and by darn i nearly did it! but alas, i got stuck at the part when i tried to add multiple items to the document.getElementById() script at the bottom of the page. i know my problem is minor, so i suspect i will get laughed at by whoever corrects me :)
... its okay people, THEY'RE ONLY FEELINGS! *sniffle*. hehe, ahhh its okay, they grow back :D

anyways, his script is on the bottom of this post:
http://www.codingforums.com/showthread.php?t=37967

and here's my code


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="css/main.css" type="text/css" media="screen">

<script>
function openPages(){
for (var i=0;i<arguments.length;i+=2){
if (arguments[ i + 1]) window.open(arguments[ i ], arguments[ i + 1] )
}
}
</script>

</head>

<body marginheight="0" leftmargin="0" topmargin="0" marginwidth="0">
<table height="30" border="0" align="center" cellpadding="0" cellspacing=0>
<tr align="center">
<td height="30"><a href="images/ordersYellow.jpg" onClick="openPages('orders.htm','_menu2'); return showImage(this.href);"><img src="images/ordersGrey.jpg" id="orders" width="94" height="30" border="0"></a></td>
<td height="30"><a href="images/inventoryYellow.jpg" onClick="openPages('orders.htm','_menu2'); return showImage(this.href);"><img src="images/inventoryGrey.jpg" id="inventory" width="94" height="30" border="0"></a></td>
<td height="30"><img src="images/reportGrey.jpg" width="94" height="30"></td>
</tr>
</table>
<script>
function showImage(sImage){
document.getElementById('orders','inventory').src=sImage;
return false;
}
</script>
</body>
</html>

canadianjameson
05-29-2004, 01:53 AM
oh... hehe, one more thing.

when a picture is changed, is there any way to make it so that if another picture link is clicked & changed on that page, the previously clicked / changed link reverts back to its original state?

ex:
Link 1 | Link2 | Link 3
...

if i click on Link 1, i want it to change to Blue
so i click...
and now i have this:
Blue | Link 2 | Link 3
...

NOW if i click on Link 2, i want it to display Red.
the result will be:
Blue | Red | Link 3

i want the result to be:
Link 1 | Red | Link 3

any ideas?

heh, sorry for being a pain guys :)

glenngv
05-29-2004, 07:24 AM
i'm trying to modify a liorean script provided here... and by darn i nearly did it! but alas, i got stuck at the part when i tried to add multiple items to the document.getElementById() script at the bottom of the page. i know my problem is minor, so i suspect i will get laughed at by whoever corrects me :)
... its okay people, THEY'RE ONLY FEELINGS! *sniffle*. hehe, ahhh its okay, they grow back :D

anyways, his script is on the bottom of this post:
http://www.codingforums.com/showthread.php?t=37967

and here's my code


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="css/main.css" type="text/css" media="screen">

<script>
function openPages(){
for (var i=0;i<arguments.length;i+=2){
if (arguments[ i + 1]) window.open(arguments[ i ], arguments[ i + 1] )
}
}
</script>

</head>

<body marginheight="0" leftmargin="0" topmargin="0" marginwidth="0">
<table height="30" border="0" align="center" cellpadding="0" cellspacing=0>
<tr align="center">
<td height="30"><a href="images/ordersYellow.jpg" onClick="openPages('orders.htm','_menu2'); return showImage(this.href);"><img src="images/ordersGrey.jpg" id="orders" width="94" height="30" border="0"></a></td>
<td height="30"><a href="images/inventoryYellow.jpg" onClick="openPages('orders.htm','_menu2'); return showImage(this.href);"><img src="images/inventoryGrey.jpg" id="inventory" width="94" height="30" border="0"></a></td>
<td height="30"><img src="images/reportGrey.jpg" width="94" height="30"></td>
</tr>
</table>
<script>
function showImage(sImage){
document.getElementById('orders','inventory').src=sImage;
return false;
}
</script>
</body>
</html>

getElementById expects only one id.

document.getElementById('orders').src=sImage;
document.getElementById('inventory').src=sImage;

canadianjameson
05-30-2004, 05:11 PM
EEK. didn't work as planned. when i insert that into my code, the following happens:

if a user clicks on Orders: both Orders and Inventory switch to Orders.
if a user clicks Inventory: both Orders and Inventory switch to Inventory.

any idea how to fix this?

as well, once a second link is clicked, i need the first one to revert back to the unclicked status...

glenngv
05-31-2004, 12:46 AM
EEK. didn't work as planned. when i insert that into my code, the following happens:

if a user clicks on Orders: both Orders and Inventory switch to Orders.
if a user clicks Inventory: both Orders and Inventory switch to Inventory.

any idea how to fix this?

So, what is it that you really wanted? I just guessed that you were trying to set the specified image both to the 'orders' and 'inventory' ids when you did:

document.getElementById('orders','inventory').src=sImage;

canadianjameson
05-31-2004, 05:13 AM
Your code was very useful, however somethings did not work.
For instance I have 3 links. I want to make it do this:

image | link2 | link3 (when first link is clicked)

link1 | image | link3 (when 2nd link is clicked)

link1 | link2 | image (when 3rd link is clicked)


This is all I am getting:

image | link2 | link3

image | image | link3

image | image | image


Any way of making this work?

essentially lise & I want the same thing. we want an image to change when the user clicks on it, then when the user clicks another link, we want the first link to revert back to its original, unclicked state, and the new link to appear clicked.

what i have now is setup in my code
orders.jpg, inventory.jpd, ordersYellow.jpg, inventoryYellow.jpg

here's what i want

initial state:
orders.jpg, inventory.jpg

orders link clicked state:
ordersYellow.jpg, inventory.jpg

inventory link clicked state:
orders.jpg, inventoryYellow.jpg

any ideas?

Garadon
05-31-2004, 08:58 PM
the easiest is to reset all the images to default state and then set the image to be changed. and you post is quite odd you talk of 3 links yet I only see 2.

canadianjameson
05-31-2004, 09:27 PM
how would i onClick reset all images to default values?

i only put two because the third one isnt linked yet. as for resetting all the images... i could have as many as 12 images using this changer... wouldnt it be less heavy on the server load / page reload looking bad to save the lastclicked ID in a variable, and then onNextClick revert that id back, and set a new ID to that variable?

i know the logic, but i can't code it :(

glenngv
06-01-2004, 05:24 AM
<a href="images/inventoryYellow.jpg" onClick="openPages('orders.htm','_menu2'); return showImage(this);"><img src="images/inventoryGrey.jpg" width="94" height="30" border="0" /></a>
<a href="images/orderYellow.jpg" onClick="openPages('inventory.htm','_menu2'); return showImage(this);"><img src="images/orderGrey.jpg" width="94" height="30" border="0" /></a>
<a href="images/reportYellow.jpg" onClick="openPages('report.htm','_menu2'); return showImage(this);"><img src="images/reportGrey.jpg" width="94" height="30" border="0" /></a>
...
<script type="text/javascript">
//global object to remember details of last clicked link
var lastClick=new Object();
lastClick.obj=null;
lastClick.defaultSrc=null;

function showImage(oLink){
if (lastClick.obj){
if (lastClick.obj!=oLink){
lastClick.obj.firstChild.src=lastClick.defaultSrc; //revert back previously clicked image
}
else return false; //do nothing, clicked link is clicked again
}

var defaultSrc = oLink.firstChild.src;
oLink.firstChild.src=oLink.href; //change image to clicked mode

//remember last clicked details
lastClick.obj=oLink;
lastClick.defaultSrc=defaultSrc;

return false;
}
</script>

canadianjameson
06-01-2004, 05:43 AM
------

canadianjameson
06-01-2004, 05:43 AM
i am lost for words

thank you Glenn



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum