Web design (thecnical questions)

octopus · October 6th, 2003

Hello, i know this is not a especific forum for these kind of question but i know there is somone that can answer me and in the other hand all the forums i´ve seen for web develop are not very good, (all right, the true is that i love this forum and the people on it :winkgrin: )

The issue:
I´m starting to build my web, and i want to have my main page with a photo; in that photo there will be an area (map) that will be a link to the second page.
I can do the map thing and the link, but what i want is that when the mouse is over that area, a new photo appears in it´s place, and if you move away then the previus photo return.

Now i need to know the way this could be achieved, i´m not asking for a step by step explanation but just to point me the right way to serch for turorials and program help; like the neme of the method etc. (also if you know tuts on that area )

BTW. i´m using the Studio MX, so i´m basically tring with dreamweaver but i could use flash for instance (if that´s the only way)

Thanks in advance.
Pablo Scapinachis

Josh · October 6th, 2003

basicly what you are looking for for is a javascript function called either a "mouseover" or a "rollover"

It is a relatively simple code. I just usually copy past the code.

crazy homeless guy · October 6th, 2003

click 'insert' on the menu bar, and scroll down to 'interactive images'.

mbr · October 6th, 2003

Dreamweaver:

Insert > select the image you want to see first > go to the Behaviors menu on the right, select Swap Image > select the image you want to see on the mouseover > type the URL in the Properties Menu on the bottom and the target (your window, new window, frame, iframe, etc.)

Flash:

Insert > Insert New Symbol > Select Button > you will get a screen that has UP, OVER, DOWN, HIT > hit F6 to put a key frame in each one and make the shapes you want to be seen on each button state > hit CTRL + L to get the Library menu open, drag button to stage > add the appropriate actionscript to have it open, move, etc.

Honestly, though, you really need to go through several tutorials if you are not familiar with this. It takes more to make a website than a button, too. You have to understand what that button is going to do, what it controls, etc.
Feel free to look at the code on my site, which is fairly straight forward html, javascript, iframes, and a little css.

I'd suggest getting a few good books. Lynda Weinman's HOT series are a good start, but there are hundreds of others.

tcorbett · October 6th, 2003

Although they've dropped off in frequency and quality, there are still a lot of good web tutorials over at Webmonkey - http://www.webmonkey.com

They also have a code library available for use.

mbr · October 6th, 2003

Yes, they are a great resource. I believe that's where I got the js for controlling multiple iframes.

Jeff Mottle · October 6th, 2003

Here's an easier way.

1. Insert your image
2. Select your image
3. In the properties tab for that image look at the lower left. You will see three light blue icons (square, circle, and polygon) click one, depending what you want to do, and drag over your image to highlight the area you want to be a hotspot.
4. Select the new hotspot(s) and from it's properties dialog enter in the link, target and Alt text.
5. you're done.

mbr · October 6th, 2003

Jeff,

But that doesn't allow for a rollover, correct? Just a hotspot?

xgarcia · October 6th, 2003

Best thing to do is slice it up in image ready and make "cell" that needs to be a rollover. OR you could use flash...I have no clue how to do flash.

octopus · October 6th, 2003

Thank you all for the fast replies; but (and there´s allways a but)

What you sugest is good to make the hole image as the link, while what i want is more like jeff explained, a map area.
That i have allready done it, but what i can´t do is the mix of bouth.
I´l try to explain better. i want the hot spot on an image and in the same time that when the cursor is over that hot spot the image changes, and of course when you click a new page displays.

i´m attaching an image just to meke it a more graphic.

The first one have the sphere as the hot spot, and i wan that when the mouse goes over the sphere, an image like the second one will replace it,(like but not that one, is just for explanation) with a hot spot in the shere too, so if you go away from there the firs image returns

I hope i made myself clear or at least understable.

Pablo

October 6th, 2003	#1 (permalink)
octopus Senior Member Join Date: May 2003 Location: Spain Posts: 146 Name: pablo scapi	Hello, i know this is not a especific forum for these kind of question but i know there is somone that can answer me and in the other hand all the forums i´ve seen for web develop are not very good, (all right, the true is that i love this forum and the people on it :winkgrin: ) The issue: I´m starting to build my web, and i want to have my main page with a photo; in that photo there will be an area (map) that will be a link to the second page. I can do the map thing and the link, but what i want is that when the mouse is over that area, a new photo appears in it´s place, and if you move away then the previus photo return. Now i need to know the way this could be achieved, i´m not asking for a step by step explanation but just to point me the right way to serch for turorials and program help; like the neme of the method etc. (also if you know tuts on that area ) BTW. i´m using the Studio MX, so i´m basically tring with dreamweaver but i could use flash for instance (if that´s the only way) Thanks in advance. Pablo Scapinachis __________________ Is it brick, or is ti CG? http://www.arquiplay.com

October 6th, 2003	#3 (permalink)
crazy homeless guy Moderator Join Date: Nov 2002 Location: San Francisco Posts: 2,893 Name: travis schmiesing	click 'insert' on the menu bar, and scroll down to 'interactive images'. __________________ travis schmiesing

October 6th, 2003	#7 (permalink)
Jeff Mottle President/Founder Join Date: Jul 2001 Location: Calgary, Alberta, Canada Age: 33 Posts: 5,057 Name: Jeff Mottle	Here's an easier way. 1. Insert your image 2. Select your image 3. In the properties tab for that image look at the lower left. You will see three light blue icons (square, circle, and polygon) click one, depending what you want to do, and drag over your image to highlight the area you want to be a hotspot. 4. Select the new hotspot(s) and from it's properties dialog enter in the link, target and Alt text. 5. you're done. __________________ Jeff Mottle CGarchitect.com

October 6th, 2003	#10 (permalink)
octopus Senior Member Join Date: May 2003 Location: Spain Posts: 146 Name: pablo scapi	Thank you all for the fast replies; but (and there´s allways a but) What you sugest is good to make the hole image as the link, while what i want is more like jeff explained, a map area. That i have allready done it, but what i can´t do is the mix of bouth. I´l try to explain better. i want the hot spot on an image and in the same time that when the cursor is over that hot spot the image changes, and of course when you click a new page displays. i´m attaching an image just to meke it a more graphic. The first one have the sphere as the hot spot, and i wan that when the mouse goes over the sphere, an image like the second one will replace it,(like but not that one, is just for explanation) with a hot spot in the shere too, so if you go away from there the firs image returns I hope i made myself clear or at least understable. Pablo __________________ Is it brick, or is ti CG? http://www.arquiplay.com

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

October 6th, 2003	#2 (permalink)
Josh Senior Member Join Date: Jun 2002 Location: Columbus, Ohio Age: 30 Posts: 201 Name: Josh Lloyd	basicly what you are looking for for is a javascript function called either a "mouseover" or a "rollover" It is a relatively simple code. I just usually copy past the code.

October 6th, 2003	#4 (permalink)
mbr Veteran Member Join Date: Aug 2002 Location: Los Angeles and Connecticut....and Denver Posts: 1,266 Name: Markus Byron	Dreamweaver: Insert > select the image you want to see first > go to the Behaviors menu on the right, select Swap Image > select the image you want to see on the mouseover > type the URL in the Properties Menu on the bottom and the target (your window, new window, frame, iframe, etc.) Flash: Insert > Insert New Symbol > Select Button > you will get a screen that has UP, OVER, DOWN, HIT > hit F6 to put a key frame in each one and make the shapes you want to be seen on each button state > hit CTRL + L to get the Library menu open, drag button to stage > add the appropriate actionscript to have it open, move, etc. Honestly, though, you really need to go through several tutorials if you are not familiar with this. It takes more to make a website than a button, too. You have to understand what that button is going to do, what it controls, etc. Feel free to look at the code on my site, which is fairly straight forward html, javascript, iframes, and a little css. I'd suggest getting a few good books. Lynda Weinman's HOT series are a good start, but there are hundreds of others.

October 6th, 2003	#5 (permalink)
tcorbett Senior Member Join Date: Aug 2003 Location: Pittsburgh, PA Age: 31 Posts: 142 Name: Tom Corbett	Although they've dropped off in frequency and quality, there are still a lot of good web tutorials over at Webmonkey - http://www.webmonkey.com They also have a code library available for use.

October 6th, 2003	#6 (permalink)
mbr Veteran Member Join Date: Aug 2002 Location: Los Angeles and Connecticut....and Denver Posts: 1,266 Name: Markus Byron	Yes, they are a great resource. I believe that's where I got the js for controlling multiple iframes.

October 6th, 2003	#8 (permalink)
mbr Veteran Member Join Date: Aug 2002 Location: Los Angeles and Connecticut....and Denver Posts: 1,266 Name: Markus Byron	Jeff, But that doesn't allow for a rollover, correct? Just a hotspot?

October 6th, 2003	#9 (permalink)
xgarcia Senior Member Join Date: Jun 2002 Location: FL Age: 29 Posts: 471 Name: Xavier Garcia, Jr.	Best thing to do is slice it up in image ready and make "cell" that needs to be a rollover. OR you could use flash...I have no clue how to do flash.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)