Registered: Dec 1999
Location: Connecticut USA
Posts: 2682

I know one of my fellow Visor-ites can help me...

I'm putting together a personal web site. I'm using FrontPage 2000 which seems easy enough to use (at least for this beginner). But I want to do something fancy that I can't find any reference to.

I want to display a page with a small (320x320) picture. The picture will have a couple of hot spots on it. When a user clicks a given hot spot, I want to change just the picture without having to reload another page. How can this be done? Do I need a Java script or something? Any help would be appreciated... even if it's just pointing me to some sort of reference.

__________________

God bless America, my home sweet home...

Registered: Jan 2000
Location: Twin Cities, MN
Posts: 1683

Yep. That's all done with Javascript. You can do that fairly easy with Macromdia Dreamweaver. Not sure how much Javascript support Frontpage has...if it does, I'd question how good it is.

You could also do this with layers as well, though you'd end up needing to use some Javascript for that as well.

Magnetbox.com has a nice little script. As always, you should ask before borrowing...

http://www.magnetbox.com/photo/index.html

Some good sites for down-and-dirty javascripts are http://www.webmonkey.com and http://www.builder.com

I put together an animated version of that at:

http://www.chromiumhook.com/characters.htm

using a modified script from Dan Steinman's site:

http://www.dansteinman.com/dynduo/

(which is a great resource, btw)

HTH!

__________________
We're all naked if you turn us inside out.
-David Byrne

Registered: Feb 2000
Location: Moved to Clie Land
Posts: 331

Another hint is to use a good search engine,(I use DOGPILE) because all the scripts are out on the web for free. I believe you are referring to an image map...I havn't used this example, but I scanned over it and it's a decent tutorial.

image map

__________________
"Stupid Handspring."

Registered: Oct 2000
Location:
Posts: 35

2 ways to do this

There are 2 ways to do this with JavaScript w/out using DreamWeaver or GoLive. Those programs will give you five pages of bloated code where 15 lines of JavaScript hand coded will do the trick.

1. create an image map with links to the same page or null links
<a href="#"><img src="map.gif" name="poop" alt="blah"></a>

--or--

2. use photoshop or imageready to slice your picture into several smaller images contained in a table. then clicking on a link will change either all of the slices or just the ones you choose to click.

as for the java script itself:
in the A tag, include onClick="somefunction()";
then write a function that changes images on click, not unlike a rollover. using javascript you can dynamically load new image maps as well as new images themselves.

i'm currently taking a javascript class and ill help u w/ the actually coding if u would like; i could use the practice.

Registered: Sep 1999
Location: Texan in Calgary for a while
Posts: 1361

Mark,

If you go to this page, it is one of the pages on my personal site that lets you scroll through images. You may be able to play with it to get what you want.

__________________
James Hromadka
Old Friend

Registered: Jan 2000
Location: Twin Cities, MN
Posts: 1683

James:

There seems to be a problem with your script in that it is not loading all of the images...just the first one. At least that's how it is working in IE5/Mac.

Just an FYI...

__________________
We're all naked if you turn us inside out.
-David Byrne

Registered: Oct 2000
Location:
Posts: 443

quote:

---

Originally posted by MarkEagle
I know one of my fellow Visor-ites can help me...

I want to display a page with a small (320x320) picture. The picture will have a couple of hot spots on it. When a user clicks a given hot spot, I want to change just the picture without having to reload another page. How can this be done? Do I need a Java script or something? Any help would be appreciated... even if it's just pointing me to some sort of reference.

---

Registered: Sep 1999
Location: Texan in Calgary for a while
Posts: 1361

quote:

---

Originally posted by homer
James:

There seems to be a problem with your script in that it is not loading all of the images...just the first one. At least that's how it is working in IE5/Mac.

Just an FYI...

---

I didn't say it was good code . Yeah, one of these days I'm going to clean up my website and fix that.

__________________
James Hromadka
Old Friend

Registered: Dec 1999
Location: Connecticut USA
Posts: 2682

Wow... lot's of good advice. Not that any of it means anything to me!

I guess I'll poke around a little and see if I can't figure it out. If not, I'll be back!

__________________

God bless America, my home sweet home...

Registered: Dec 1999
Location: Connecticut USA
Posts: 2682

I think I finally got it

First of all, thanks to everyone for all the help, especially thatch who's been kind enough to help (ok... he wrote the code for me!) via email. I'm an illiterate when it comes to this stuff... maybe I should just stick to moderating

If you're the least bit interested in what I was trying to do, check out this page on my site. It's not much and I think it may still have a problem or two, but it's there. Let me know what you think.

Thanks again.

__________________

God bless America, my home sweet home...

Registered: Oct 2000
Location:
Posts: 35

your page is pointless but very cool. nice code

Registered: May 2000
Location:
Posts: 321

check http://javascript.internet.com

__________________
My processing power is contributed to
<a href="http://members.ud.com/services/teams/team.htm?id=E3894ECF-2FDA-4B0E-AD9E-45FEFF2D5AB6"><IMG SRC="http://members.ud.com/img/ud_logo_hdr_fff.gif"><a>
JOIN TODAY!

Registered: Dec 1999
Location: Connecticut USA
Posts: 2682

Thanks for the link, Jeff. Looks like a pretty good site for a novice like me.

__________________

God bless America, my home sweet home...