Arch Linux

KomodoDave

Member

From: Oxford, UK

Registered: 2007-04-22

Posts: 162

Website

Javascript and images

This is TOTALLY doing my nut in.

I'm trying to get big on web development, since my application development knowledge is pretty advanced now. I'm learning the ins and outs of Javascript, and there's one thing that's proving very frustrating for me. I cannot adjust style.top for any of my images.

Here's an example.

Say I have

XHTML:

<img id="imgid" src="images/myimg.png" />

CSS:

img#imgid {
    top:    5px
}

Javascript:

alert(document.getElementById("imgid").style.top)

The alert just shows a blank alert box, even though I've set the 'top' property in my CSS.

I've also tried doing

Javascript:

var img = document.getElementById("imgid");
img.style.top = "50px";
alert(img.style.top);

and I still get a blank box >_<

In a similarly incomprehensible fashion, doing

Javascript:

alert(img.style.width);

shows nothing, yet doing

Javascript:

alert(img.width);

DOES show the image width.

Is there some hidden Image object in DOM / Javascript that I'm unaware of? Is the width thing related to the fact that width and height attributes can be set in the XHTML img tag?

The top thing is of major concern for me, since I can't create this final animation I want to do on my website without it

I use www.w3schools.com and http://developer.mozilla.org as my references for Javascript/DOM/CSS/XHTML stuff, but neither has provided any answers to these issues.

I'd be massively greatful for tips from experienced webdevelopers on this, since I have no idea what I'm doing wrong.

- KD

KomodoDave

Member

From: Oxford, UK

Registered: 2007-04-22

Posts: 162

Website

Re: Javascript and images

Ok, well I've established the width/height thing - there is in Image object that isn't made clear on either of my reference sites, listed above.

  http://www.javascriptkit.com/jsref/image.shtml

I still don't understand why I can't access style.top though.

- KD

KomodoDave

Member

From: Oxford, UK

Registered: 2007-04-22

Posts: 162

Website

Re: Javascript and images

Well after all that, now I know the Image object exists and have noticed a typo I made in my js, things are running a bit smoother.

Now doing

img.style.top = "50px";
alert(img.style.top);

displays '50px' as is expected.

I'm still unable to read a top value set by my CSS though, with style.top . Is this normal?

I've just tested using

alert(document.styleSheets[0].cssRules[5].style.top);

and that displays the top value a-ok. So how can I get style. top to work? Is it impossible because the Image object has no 'style' property? Can I somehow cast DOM Image -> DOM Element? I'd rather not have to fix the position of every selector within my CSS, simply so that my Javascript functions as it should.

- KD

Last edited by KomodoDave (2007-05-05 01:12:12)

KomodoDave

Member

From: Oxford, UK

Registered: 2007-04-22

Posts: 162

Website

Re: Javascript and images

Here's the answer!

   http://news.hping.org/comp.lang.javascr … /5822.html

- KD