DHTML onmouseover changepicture help please!

[photoresistor]

This is my site layout idea:

http://www.gbaprojects.com/images/bypic.jpg

(its a little page for a punk band)

What I want to do with the top menu is where I'm having my problems with.

The top menu is just one pic I made in Photoshop. I want it so that when the mouse goes over a link (like news/music/tour), the 'regret' above that link will glow red (i can make it do that in photoshop). In frontpage it will add the dhtml effect without you having to do any coding. You just select when to do it (mouseover/click/etc) and what effect (ie: change image).

What I thought was that when the mouse moves over the hotspot that I made in frontpage on the picture then it would change the picture. However, it won't do this. For example, I made the hotspot over the 'news' but it just made the dhtml effect for the entire image so when the mouse goes over any part of the top menu the picture will change.

Can you do this DHTML on hot spots?? i hope so...

ANY feedback is appreciated (even general comments/suggestions on the site layout/scheme/design/colors/etc)!

THANKYOU!!!


I should let you know that I've only messed around a bit in frontpage myself and am only 16.

[ShdwStal]

HAH, I'm 13 and I use HTML, DHTML and JavaScript without problems.

As for your question, I believe that you can do that.
I'm not sure though, but maybe if you use a map...

[photoresistor]

"HAH, I'm 13 and I use HTML, DHTML and JavaScript without problems."

Impressive... wish I was that good w/ this stuff. Oh well, wouldn't use it much anyways.

Thanks for the reply... a map, huh? Well if I can figure out exactly what the hell that is... hehe :)

[pardicity3]

Originally posted by ShdwStal
HAH, I'm 13 and I use HTML, DHTML and JavaScript without problems.
Good for you, you should be proud of yourself, but that doesn't mean that you should brag. This forum is here for answering questions and helping people, not for laughing at them and braging. Anyway...

What you want to do sounds like it is going to be more trouble then it has to be. See, when you do the onmouseover imaging change effect it is changing one image to another image. Thus, if you only have one image for your whole navigation (which is the way I interpreted it) then you will have to change that whole image any time you want to change it.

Of course, you could dowhat you want if you got into messy stuff using div's and what not, but I have never liked that much--and I am also not sure how much you can do with that stuff using frontpage. What I might recommend, is cutting your picture up into to smaller portions and aligning them using tables so that they don't look like they are cut up. For instance, if you cut each different "regrets" into a seperate picture you could easily change just that picture when you mouseover a certain area.

Hopefully this helps you out, if you are confused, which you probably are knowing how I explain things, feel free to say so and I will try and explain better!! Good luck!!!

[photoresistor]

I thought about cutting up the image, but not about using the tables to easily arrange them... thanks for the advice.

I'll try that out.

[photoresistor]

It will work but I've run into some OTHER problems... nothing goes smoothly for me, geeze.


Its set up as all one table now (the whole page).... now when I add all the extra columns (to separate all the chopped up images) this occurs:

http://www.gbaprojects.com/images/problem.jpg

That is, the column separating the lower two frames is automatically snapped to what the column up in the top menu is at. And right now all of the regrets and links aren't even chopped up yet. It won't go back to where it was.

Also, I have to make the frame border = 0 so the images in the top aren't cut up by borders... however, this ruins the borders I've already set for the rest of the table.


I tried to solve it by....

Making the top menu a whole nother table... seems to work except there is now a gap in between the two tables that I can't figure out how to close. There should be some simple to this at least right?


Can somebody help me? Thanks in advance.

[pardicity3]

Hmm, I was slightly confused by what you meant when you said:

"That is, the column separating the lower two frames is automatically snapped to what the column up in the top menu is at."

But all i can say right now is that you might want to try and see if the tables have their cellpadding and cellspacing set to zero (i.e. <table cellpadding="0" cellspacing="0" border="0">). If you do that, there shouldn't be any space between your sliced up graphics. Though, I am not even sure if this is your exact problem or not. Good luck!!

[photoresistor]

This is what I meant:

http://www.gbaprojects.com/images/problem2.jpg

(esplanation on image).

All of the white bars, vertical or horizontal are the table borders (what they look like in frontpage when border=0).

see?



Anyways, what I'm trying now is just putting all of the pictures into the top cell (not separating all into tables)... I've basically given up the 'move mouse over news and the 'regret' above it changes red' because all of the images are chopped up. I don't know how to make it so 'when mouse goes over the news image to change 'regret.jpg' to 'regretRED.jpg' so to say.

I think I'll just have to make the regrets turn red when the mouse goes over a particular regret.

hmmmmmmm.....

[Roy Sinclair]

While using tables if things don't fall where you expect them to fall it's often a case of mis-matched html tags. Run your code through a HTML validator and let it tell you what kind of problems it detected.

A very simple example of mismatched tags would be:

<u><i>data</u></i>