HTML Forum

**Fanboy** · 03-30-2006, 05:23 PM

I've been doing Tutorials for Slicing and making images in the slices for "Rollover" links

I have done that successfully, ...however...how do I incorporate that into a webpage.

When I do the "Preview in a browser"in image ready..it shows the resulting image....and then there's HTML code underneath.

Do I put that code into my HTML (In dreamweaver, hoever, when I try to "preview" in dreamweaver I get a broken image)? Also, the resulting image is a Gif...kinda confused me, because I see no "Gif" file of such a sort after the final image is generated.
Do I need to change the directory in the CODE that it's pointing to? Configure it?

I'd like to know how to properly incorporate this sliced image into a website.

**thunderburung** · 03-30-2006, 07:34 PM

You should move you image file and change the url code pointed to the correct directory.

**Fanboy** · 09:40 PM

Quote:

Originally Posted by thunderburung

You should move you image file and change the url code pointed to the correct directory.

Well, the only thing I did was move the "Interface_01.gif" into an the "image" directory that I had to creat in order for it to work,.....however, correct me if I am wrong there are OTHER images...that correlate to the "Image slice/or 'cut-out'" within that image (the link buttons.....I can't seem to FIND those images....but I'm assuming those very images are WITHIN that main image?

Here's the the code:

[i]<HTML>
<HEAD>
<TITLE>Interface</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">

<SCRIPT TYPE="text/javascript">

</SCRIPT>

</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 ONLOAD="preloadImages();">

<IMG NAME="Interface_01" SRC="http://www.webmaster-talk.com/images/Interface_01.gif" WIDTH=267 HEIGHT=267 BORDER=0 ALT="" USEMAP="#Interface_01_Map">
<MAP NAME="Interface_01_Map">
<AREA SHAPE="circle" ALT="" COORDS="48,108,22" HREF="#"
ONMOUSEOVER="changeImages('Interface_01', 'images/Interface_01-ImageMap_05_ov.gif'); return true;"
ONMOUSEOUT="changeImages('Interface_01', 'images/Interface_01.gif'); return true;"
ONMOUSEDOWN="changeImages('Interface_01', 'images/Interface_01-ImageMap_05_ov.gif'); return true;"
ONMOUSEUP="changeImages('Interface_01', 'images/Interface_01-ImageMap_05_ov.gif'); return true;">
<AREA SHAPE="circle" ALT="" COORDS="83,208,22" HREF="#"
ONMOUSEOVER="changeImages('Interface_01', 'images/Interface_01-ImageMap_04_ov.gif'); return true;"
ONMOUSEOUT="changeImages('Interface_01', 'images/Interface_01.gif'); return true;"
ONMOUSEDOWN="changeImages('Interface_01', 'images/Interface_01-ImageMap_04_ov.gif'); return true;"
ONMOUSEUP="changeImages('Interface_01', 'images/Interface_01-ImageMap_04_ov.gif'); return true;">
<AREA SHAPE="circle" ALT="" COORDS="186,208,22" HREF="#"
ONMOUSEOVER="changeImages('Interface_01', 'images/Interface_01-ImageMap_03_ov.gif'); return true;"
ONMOUSEOUT="changeImages('Interface_01', 'images/Interface_01.gif'); return true;"
ONMOUSEDOWN="changeImages('Interface_01', 'images/Interface_01-ImageMap_03_ov.gif'); return true;"
ONMOUSEUP="changeImages('Interface_01', 'images/Interface_01-ImageMap_03_ov.gif'); return true;">
<AREA SHAPE="circle" ALT="" COORDS="218,108,22" HREF="#"
ONMOUSEOVER="changeImages('Interface_01', 'images/Interface_01-ImageMap_02_ov.gif'); return true;"
ONMOUSEOUT="changeImages('Interface_01', 'images/Interface_01.gif'); return true;"
ONMOUSEDOWN="changeImages('Interface_01', 'images/Interface_01-ImageMap_02_ov.gif'); return true;"
ONMOUSEUP="changeImages('Interface_01', 'images/Interface_01-ImageMap_02_ov.gif'); return true;">
<AREA SHAPE="circle" ALT="" COORDS="131,47,24" HREF="#"
ONMOUSEOVER="changeImages('Interface_01', 'images/Interface_01-ImageMap_01_ov.gif'); return true;"
ONMOUSEOUT="changeImages('Interface_01', 'images/Interface_01.gif'); return true;"
ONMOUSEDOWN="changeImages('Interface_01', 'images/Interface_01-ImageMap_01_ov.gif'); return true;"
ONMOUSEUP="changeImages('Interface_01', 'images/Interface_01-ImageMap_01_ov.gif'); return true;">
</MAP>

</BODY>
</HTML>
--------------------
Now....where in the heck are those "Interface_01-ImageMap_01_ov.gif" and others are at??

Don't I need those to upload them to the "image" directory like the Interface_01.gif?

That seems to be the only "Existing" gif in relation to the webpage.

Here is what I have now...but it acts wierd when I do a mouseover, the picture disappears when the mouse goes over the links:

http://www.fanboyonline.com/Image%20...face_Page.htm#

**thunderburung** · 03-31-2006, 07:39 AM

Let's assume that when the mouse is over any button, the corresponded button will change to another color.

From your code I know that you are using "map" to create five different buttons base on one image (Interface_01.gif).

In order to get the rollover effect work, you need 6 images, they are
Interface_01.gif
Interface_01-ImageMap_01_ov.gif
Interface_01-ImageMap_02_ov.gif
Interface_01-ImageMap_03_ov.gif
Interface_01-ImageMap_04_ov.gif
Interface_01-ImageMap_05_ov.gif

I think you did not export the image in proper way coz you just get one image only, may I know how you export the image and what software you are using?

**Fanboy** · 03-31-2006, 08:30 PM

Quote:

Originally Posted by thunderburung

Let's assume that when the mouse is over any button, the corresponded button will change to another color.

From your code I know that you are using "map" to create five different buttons base on one image (Interface_01.gif).

In order to get the rollover effect work, you need 6 images, they are
Interface_01.gif
Interface_01-ImageMap_01_ov.gif
Interface_01-ImageMap_02_ov.gif
Interface_01-ImageMap_03_ov.gif
Interface_01-ImageMap_04_ov.gif
Interface_01-ImageMap_05_ov.gif

I think you did not export the image in proper way coz you just get one image only, may I know how you export the image and what software you are using?

I am using Adobe's Image ready.

And I did not know I had to export anything. This is what I am basically doing...so correct my method if I am doing it wrong.

In Adobe "Image Ready CS", I can "Preview" this ".psd file" that I created, and it comes up in one of my Browser, be it IE or Mozilla....and it comes up as a SUCCESSFUL navigational map AND underneath it, of course, the code it generates to be used in your HTML Editor ( I use Dreamweaver MX)...and by the way it becomes a .gif and it works great ...at least while previewing.

Then I take that code, go into my Dreamweaver and create a NEW file...paste the code into the (Code) section, and it comes up with this:

**Fanboy** · 03-31-2006, 08:31 PM

ALSO, if you want to see the bottom configuration without the "Blue Aqua" circle selected, to get a better idea of what we're dealing with:

**thunderburung** · 04-01-2006, 06:53 AM

Below is a simple way to get the images you need.

1. open your file again in Adobe imageReady.
2. select File→Save Optimized As (or Ctrl+Shift+Alt+S)
3. chose a directory and press "Save" to save the file (html file)
4. go to the directory which you save the html file and you should find a directory called "images" inside it.
5. grab all the images(Interface_01-ImageMap_01_ov.gif~Interface_01-ImageMap_05_ov.gif) you need in "images" directory and locate them in the right place.

Hope this can solve your problem.

**Fanboy** · 07:58 AM

Quote:

Originally Posted by thunderburung

Below is a simple way to get the images you need.

1. open your file again in Adobe imageReady.
2. select File→Save Optimized As (or Ctrl+Shift+Alt+S)
3. chose a directory and press "Save" to save the file (html file)
4. go to the directory which you save the html file and you should find a directory called "images" inside it.
5. grab all the images(Interface_01-ImageMap_01_ov.gif~Interface_01-ImageMap_05_ov.gif) you need in "images" directory and locate them in the right place.

Hope this can solve your problem.

Thunder, that worked indeed...thank you.

All this time I had been doing these tutorials of creating these image maps and even making full graphical "Layouts" and slicing them up for linkage, however, they don't go into it at the end with "So, what do you do with your image, once it's sliced and ready to be published on the net.

Another question...if I decide to make changes to that, ie create URLS for the links and such, after I edit it in I.R. CS, do I have to Save Optimize, and re-load up everything again?

Thanks again!

**Fanboy** · 04-01-2006, 08:10 AM

Hm

It appears, when I make "Links" in those image maps...it links it go to the Interior of my website

Like my website is Fanboyonline.com

And I made the linkt to go to simply Ebay.

But when I do that I get this "www.fanboyonline.com/www.ebay.com"

**chrishirst** · 04-01-2006, 02:16 PM

that's because you need http:// in front of external links

**Fanboy** · 04-01-2006, 03:11 PM

Quote:

Originally Posted by chrishirst

that's because you need http:// in front of external links

Ah...okay....the "http://" is the key. I remember that having to be the case before...I guess I have to go back to the ol HTML 4.0 101 Manual LOL!

**thunderburung** · 04-03-2006, 01:28 AM

hi, Fanboy,

Once you chose "Save Optimized" or "Save Optimized As " in ImageReady, the program will output a ready to be published html+images. I always keep the outputed image in "images" folder and delete all the othe files because I prefer coding the html by my own.

**mxrider** · 04-03-2006, 01:41 PM

WOW these answers are all find and dandy..but wow that is complex..try slicing with fireworks, and or photoshop it allows for slices to act as links...soooooo much easier then all this coding crap

**Fanboy** · 04-03-2006, 08:54 PM

Quote:

Originally Posted by mxrider

WOW these answers are all find and dandy..but wow that is complex..try slicing with fireworks, and or photoshop it allows for slices to act as links...soooooo much easier then all this coding crap

wait... you can "Slice" In photoshop?

I thought the purpose of Image Ready was to do the Slicing...and photo shop provided the imaging/graphics.

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!