[thelist] javascript rollovers or CSS maybe

Emma Jane Hogbin emmajane at xtrinsic.com
Mon Mar 3 23:57:01 CST 2003


On Tue, Mar 04, 2003 at 12:07:30AM -0500, burgan at iprimus.com.au wrote:
> Here's this link to the page again -
> http://www.greaterthani.com/test/index.html

Much better! I think you changed the DTD while I wasn't looking though.

The very first line of your page is incorrect. It says:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"http://www.w3.org/TR/REC-html40/frameset.dtd">
This is incorrect because it's for making framed pages.

Delete that and replace it with:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
This is the correct DTD for your page because you're not using frames.

> What I'm trying to do this time is have the squares in the 'titlebar'
> change when they're rolled-over, and when they're clicked I want it to
> change the 'image of text' next to the buttons and the photo's.

Right now the "photo" list is working for the onclick event (onclick,
onmouseover, and onmouseout are all called "events." Although I'm prone to
give them other weird names by mistake sometimes). In XHTML they're
spelled all lowercase, but your mixed case is fine...

Your DreamWeaver "behaviours" (these are really javascript functions) are
abstract, but you can modify them to do what you want. I did have a full
explanation of what the DW behaviours /actually/ do. Quite frankly it's
not worth wasting the bandwidth over.

There's one very important thing to notice: The sample usage is almost
identical for each box. What changes is the next-to-last line with your
phot1 or phot2 (etc). The item two before that tells you which image to
change (the one with id="phimg" -- which is the same for each box).

Here's how to do everything without using a function. Find a tutorial to
help you with the function part. ;) www.webmonkey.com is where I learned
javascript from. www.devshed.com also has some great tutorials. And
javascript.internet.com has a great cut-and-paste library of functions and
doodads. Here's the basic of basics for what you need:

onMouseOver="document.NAMEOFBOX.src='BOX2.JPG'"
onMouseOut="document.NAMEOFBOX.src='BOX1.JPG'"
onClick="document.NAMEOFPIC.src='FILE.JPG'"

And then your pictures need to have name="NAMEOFPIC" (the main image for
clicking) or name="NAMEOFBOX". Don't forget that the NAMEOFBOX needs to be
different for each box! e.g. box to click:
	<img src="BOX1.JPG" name="BOXA" alt="change image to..."
	border="0">

	<img src="BOX1.JPG" name="BOXB" alt="change image to..."
	border="0">

> I am able to do the majority of this in Dreamweaver using a Behaviour, but
> it doesn't work with rollovers at the same time.

It should, you just need to change the event handler. However it's
probably not worth the effort as the DreamWeaver stuff is abstracted into
oblivion. If you are interested I can send you the line by line, but it's
really not worth it, IMO.

> Also, I've decided to expand myself a little - let's not use dreamweaver
> and learn from somewhere else.

Good. :) Dreamweaver is a fine tool for many, many things. However, learning
HTML, CSS and Javascript are not in that list.

emma

--
Emma Jane Hogbin
[[ 416 417 2868 ][ www.xtrinsic.com ]]



More information about the thelist mailing list