[RESOLVED] Referencing table cells (td tags)

[StableOS]

What I am trying to do is to have an image swap (change to another image) in one cell of the table when the mouse is OVER an image in another cell. I know that JavaScript would need to be used but I am only a beginner in JavaScript and I have no idea how to reference another cell.
Any help will be appreciated.

[Scuba]

I don't remember much of it but you can refer directly to the picture in question and skip the cell all together.

[ScottieM3]

Yeah as Scuba said you don't have to reference the cell, only the image


Try this (not in depth, just example)

put this in the head:

  <script language="Javascript">
     function changeImage(name){
       docum ent[name].src = "/path/imagetoshow";
      }
  &lt/script>


Image to swap:

&ltimg src="/path/imagetoswap" name="toSwap">


Image to trigger the swap:

&ltimg src="/path/imagetotrigger" onmouse0ver="changeImage('toSwap');">

note chage "0" in 0ver to "o"
also change all "src" location to valid image references
This is very basic.. if you want something more indepth, like the ability to switch the image back to the original when the user mouses out, let me know and I will send you a detailed script


Let me know if this helps

[WebHead]

Oh, btw, this is called a "Rollover image".

Also, here's some code that you could use so that you don't have to get all jiggy with javascript and stuff:
<a href="http://home.earthlink.net/~seanmorrison/testing.htm" target="_blank">Click here to see the code</a>

You can just replace the test marked in red with whatever images and links you want to use. And it's as simple as copying and pasting one line into your html code.

[ScottieM3]

[quote]Originally posted by WebHead:
<strong>Oh, btw, this is called a "Rollover image".

Also, here's some code that you could use so that you don't have to get all jiggy with javascript and stuff:
<a href="http://home.earthlink.net/~seanmorrison/testing.htm" target="_blank">Click here to see the code</a>

You can just replace the test marked in red with whatever images and links you want to use. And it's as simple as copying and pasting one line into your html code.</strong><hr></blockquote>

Hey how's it going WebHead
Actually this bit of code won't work:

<span style="color: #FF3333;">&lt;a href="www.enteraurlhere.com" onMouse0ut="MM_swapImgRestore()" onMouse0ver="MM_swapImage('Image1','','/folder/firstimage.jpg',1)"&gt;&lt;img name="Image1" border="0" src="/folder/secondimage.jpg" width="75" height="75"&gt;&lt;/a&gt;</span>


you see above, this code is generated from a Macromedia wysiwyg (i.e DreamWeaver) and you calling the functions "MM_swapImgRestore()" and ="MM_swapImage()" these function need to be put into a Javascript in the head of your page, if not you will get an object error.


Here is your test code modified to do what you were referencing (no javascript in head)


<span style="color: #0000FF;">&lt;a href="www.enteraurlhere.com" onMouse0ut="document.Image1.src = 'old image path';" onMouse0ver="document.Image1.src = 'new image path';"&gt;&lt;img name="Image1" border="0" src="current image path"&gt;&lt;/a&gt;</span>


this will work, just copy this to your page and add your image paths, anchor path, and change the zero's in the mouse action tags back to "O"


not flamming just helping

[WebHead]

Hmmm,.. true. I never noticed that before. My bad. Ooops.

[Scuba]

but let's say that I want to referance a cell in a table.....
How actually do I do it ? <img src="confused.gif" border="0">

[ScottieM3]

[quote]Originally posted by Scuba:
<strong>but let's say that I want to referance a cell in a table.....
How actually do I do it ? </strong><hr></blockquote>

LOL sorry

Try this:

<span style="color: #660000;">
&lt;script language="Javascript"&gt;
&nbsp;&nbsp;&nbsp;function change(){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(document.getEleme ntById('test').className == "red"){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document .getElementById('test').className = "blue";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document .getElementById('test').className = "red";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&lt;/script&gt;
</span>
<span style="color: #660066;">
&lt;style type="text/css"&gt;

&nbsp;&nbsp;&nbsp;.red {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-weight: bold;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: #0000FF;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: #FF3333;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;.blue {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-weight: bold;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: #FF0000;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: #0000FF;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}

&lt;/style&gt;
</span>
<span style="color: #000099;">
&lt;table width="500" border="1"&gt;
&lt;tr&gt;
&lt;td width="100%" id="test" class="red"&gt;&lt;a href="Javascript:change();"&gt;Click here to change bgcolor&lt;/a&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
</span>
The key here is the "id" attribute of the table data cell, in the Javascript I have "getElementById('test')" that is telling the script to look for any element in the page that has an "id" attribute and of all the elements with that attribute to find the one that contains "test". This is how you target the cell


Netscape likes the getElementById and so does IE but netscape is picky about styles, so this probably won't work in netscape 4 because I'm trying to cahnge the bgcolor of a cell with css and Netscape 4 doesn't like that


Copy the Javascript and the Style Sheet into your head and the table into the body. This is just a simple example but should give you enough info to get going on something more in depth

[Scuba]

What I was thinking is changing or more correct to say, setting the content of a table cell.

So To set the cell ID is not complicated, and I can understand how to change it's properties,
But how to I change the text that is in the cell ?

What do I put instead of the .className ?

[ScottieM3]

[quote]Originally posted by Scuba:
<strong>What I was thinking is changing or more correct to say, setting the content of a table cell.

So To set the cell ID is not complicated, and I can understand how to change it's properties,
But how to I change the text that is in the cell ?

What do I put instead of the .className ?</strong><hr></blockquote>

well its really not that easy.. there is no way to directly change the contents of a cell (text that is) but you can simulate this

Example:

Put this in your document head:

<span style="color: #660000;">
&lt;script language="Javascript"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;Showing = "show1";&nbsp;&nbsp;&nbsp;// Initially declare what is visible
&nbsp;&nbsp;&nbsp;&nbsp;notShowing = "show2";&nbsp;&nbsp;&nbsp;// Initially declare what is hidden
&nbsp;&nbsp;&nbsp;&nbsp;function changeText(){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;do cument.all[notShowing].style.visibility = "visible";&nbsp;&nbsp;&nbsp;// Show the hidden layer
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ho lder = Showing;&nbsp;&nbsp;&nbsp;// Temporarily hold the ID of the layer that was showing
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;do cument.all[Showing].style.visibility = "hidden";&nbsp;&nbsp;&nbsp;// Hide the visible layer
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sh owing = notShowing;&nbsp;&nbsp;&nbsp;// Reset "Showing" to the layer that is now visible
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;no tShowing = holder;&nbsp;&nbsp;&nbsp;// Reset "notShowing" to the layer that is now hidden
}
&lt;/script&gt;
</span>

Put this in your document body:

<span style="color: #000099;">
&lt;table width="200"&gt;
&lt;tr&gt;
&lt;td&gt;
&lt;span id="show1" style="position: absolute; visibility: visible;"&gt;Hello this is span id "show1"&lt;/span&gt;
&lt;span id="show2" style="position: relative; visibility: hidden;"&gt;Dude this is span id "show2"&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href="Javascript:changeText();"&gt;Click to change contents of "td"&lt;/a&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
</span>


Whats happening here is we are setting two span tags in the same datacell with different content in each, we are placing them over top of each other with css positioning, and hiding one of the span tags. With the javascript were changing the visibility of the span tags to simulate a content change.

Do I got it yet, or you still looking for something else