Setting styles with JS

[Mike]

Hello,
I am trying to change the style(Position of an image) with a
function.This code worked a month ago and I dont know what I changed
I'm only showing the relevant code. One image is superimposed on
another.

>From The html file:

--------------------------------------------------------------------
<script type="text/javascript">
function changenote(element) {

alert ("This Function is being Called");//Checking to see if the
function gets called, it does
var p = document.getElementById(element);
p.style.top =30;
p.style.left=30;

}

</script>

.......
<div id="GridBlock"><img alt="Blank Grid" src="crdgrid4.gif"
class="GridLayout" id="grid1" />
<img id="E"src="Root.gif" alt="none" class="Circle"
style="visibility:visible"></img>
<img id="A"src="Root.gif" alt="none" class="Circle"
style="visibility:hidden"></img>
<img id="D"src="Root.gif" alt="none" class="Circle"
style="visibility:hidden"></img>
<img id="G"src="Root.gif" alt="none" class="Circle"
style="visibility:hidden"></img>
<img id="B"src="Root.gif" alt="none" class="Circle"
style="visibility:hidden"></img>
<img id="e"src="Root.gif" alt="none" class="Circle"
style="visibility:hidden"></img>
</div>

..........

<td id="NoteA" width="22" class="Cellstyle"
onclick="changenote('E')"><a href="">A</a></td>

----------------------------------------------------------------------------

>From the Css:

..Circle {
position: absolute;

top: 63px;
left: 20px;
}

I am trying to change the position of "Root.gif" when I click the link
in the cell with id+"NoteA".
But nothing is changing.
Thanks
Mike

[shimmyshack]

On May 15, 2:28 am, Mike <[e-mail]:

Hello,
I am trying to change the style(Position of an image) with a
function.This code worked a month ago and I dont know what I changed
I'm only showing the relevant code. One image is superimposed on
another.>From The html file:

--------------------------------------------------------------------
<script type="text/javascript">
function changenote(element) {

alert ("This Function is being Called");//Checking to see if the
function gets called, it does

var p = document.getElementById(element);
p.style.top =30;
p.style.left=30;

}

</script>

......
<div id="GridBlock"><img alt="Blank Grid" src="crdgrid4.gif"
class="GridLayout" id="grid1" />
<img id="E"src="Root.gif" alt="none" class="Circle"
style="visibility:visible"></img>
<img id="A"src="Root.gif" alt="none" class="Circle"
style="visibility:hidden"></img>
<img id="D"src="Root.gif" alt="none" class="Circle"
style="visibility:hidden"></img>
<img id="G"src="Root.gif" alt="none" class="Circle"
style="visibility:hidden"></img>
<img id="B"src="Root.gif" alt="none" class="Circle"
style="visibility:hidden"></img>
<img id="e"src="Root.gif" alt="none" class="Circle"
style="visibility:hidden"></img>
</div>

.........

<td id="NoteA" width="22" class="Cellstyle"
onclick="changenote('E')"><a href="">A</a></td>

---------------------------------------------------------------------------->From the Css:

.Circle {
position: absolute;

top: 63px;
left: 20px;

}

I am trying to change the position of "Root.gif" when I click the link
in the cell with id+"NoteA".
But nothing is changing.
Thanks
Mike

that is the worst piece of code i've seen in a long while.
add a return false statement, so from

<td id="NoteA" width="22" class="Cellstyle"
onclick="changenote('E')"><a href="">A</a></td>

to

<td id="NoteA" width="22" class="Cellstyle"

><a onclick="changenote('E');return false;" href="">A</a></td>

but seriously, that's all i'm going to say!

[=?ISO-8859-1?Q?G=E9rard_Talbot?=]

Mike wrote :

Hello,
I am trying to change the style(Position of an image) with a
function.This code worked a month ago

Worked? In which browsers? In which browser versions?

and I dont know what I changed

I'm only showing the relevant code.

That's not how serious debugging can be done, you see.
Not being able to see the whole code may prevent people from actually
figuring out your problem. Just posting an url would have been better, a
lot better.
One image is superimposed on

another.

>>From The html file:

--------------------------------------------------------------------
<script type="text/javascript">
function changenote(element) {

alert ("This Function is being Called");//Checking to see if the
function gets called, it does
var p = document.getElementById(element);
p.style.top =30;

[snipped]

W3C DOM2 Reflection of an Element's CSS Positioning Properties

CSS 1 and CSS 2.x specifications require that non-zero values must be
specified with a length unit; otherwise, the css declaration will be
ignored. Mozilla-based browsers, MSIE 6+, Opera 7+ and other W3C
standards-compliant browsers enforce such handling of parsing error.
CSS 1 Forward-compatible parsing
http://www.w3.org/TR/REC-CSS1#forwar...atible-parsing
CSS 2.1 Rules for handling parsing errors
http://www.w3.org/TR/CSS21/syndata.html#parsing-errors

See section 3.3.1.2 of
Using Web Standards in your Web Pages
http://developer.mozilla.org/en/docs...your_Web_Pages

So, here the correct js code must be
p.style.top = "30px";
Mike, post an url. First make sure your markup code passes HTML
validation and make sure your CSS code is valid.

Gérard
--
Using Web Standards in your Web Pages (Updated Apr. 2007)
http://developer.mozilla.org/en/docs...your_Web_Pages

[Pete]

>

So, here the correct js code must be
p.style.top = "30px";

Another option would be to work with a class rather than individual
style elements.

p.className = 'newclass';

[Mike]

I want the "R" image superimposed on the Fretboard.And Relative to the
upper left corner on the fretboard

I want it to reposition when I click the "A" Link
http://www.ampsoft.com/Guitar/

Thanks
Mike