Imageready Rollovers and Dreamweaver

SH
Posted By
Shawna_Heffernan
Jan 6, 2004
Views
255
Replies
2
Status
Closed
Hi!
I have created a Photoshop graphic with slices and rollovers that have been created in ImageReady. The problem I’m having is that I can’t seem to figure out how to place/insert that file into a specific cell of a table in DreamWeaver. I have saved the file as HTML w/ all the images and the file will work properly in DW if I just OPEN the file. But if I do that, I can’t control where the image is situated on the page and I can’t seem to add tables or cells around the image for additional text and images.

I’m new to ImageReady and am loving the ease of creating rollovers. I really don’t want to switch over to Fireworks, but I know that placing a Fireworks image into a cell is as easy as clicking on the Fireworks insert button.

I feel like there has to be a very easy solution, I’m just missing out on something here!

Thanks for your help!
Related Tags
imageready rollover

How to Master Sharpening in Photoshop

Give your photos a professional finish with sharpening in Photoshop. Learn to enhance details, create contrast, and prepare your images for print, web, and social media.

SW
Shank_Williams
Jan 8, 2004
There is a Dreaweaver extension called "Insert ImageReady HTML" (Macromedia
Exchange, in the Productivity catagory, "61-80"). I have not used it.
There is one "bug" in ImageReady (IR2, at least) code. It does not include
type = "text/javascript"
within <script language="JavaScript"> when it creates JavaScript for rollovers, ie. it should be <script language="javascript" type = "text/javascript">. I don’t know if the extension fixes that, which is necessary if you intend to validate your markup. I’m not sure it matters otherwise.
All that said, if you want to just copy your ImageReady stuff into a an existing DW page, it is easy enough.

If you are doing rollover buttons in IR, you need to paste three parts of the IR code into the HTML doc (use Code View in DW), and put your images folder in your site root folder.
The three parts are…
1.Preload Script (including comments, before and after; if you make use of comments it will help you keep things straight), which goes into the HEAD section (not the HEAD tag) of the html doc. (Don’t forget to put in type ="text/javascript" as mentioned above).
2.This bit of code, which goes into the BODY tag…
ONLOAD="preloadImages();"
Make sure it goes into the actual tag of the BODY tag, like this… <BODY BGCOLOR="#595959" ONLOAD="preloadImages();" >
3.The ImageReady Slices, (including comments, before and after), which
is the code for the display of the slices (the table code) and the rollover code, where you will plug in the links.
This goes into the BODY section (not the BODY tag).
As it is a table, it should nest ok in a cell (<TD> IR generated table here </TD>) in a table you made in DW.
Many pro web designers (I’m not a pro) prefer to use PS to make and slice their images, and use DW to make the JavaScript, avoiding any use of IR code. Or they use Fireworks (roughly equiv. to IR, but supposedly much better). Or they hand code.
I have never had a problem doing it the way I described above, though it is important to use as simple a slice scheme as you can, with as few slices as possible, to avoid the creation of complicated tables, with many colspans and rowspans and spacer images.
If I were to do any more rollovers, which I have kind of gotten away from, I would probably try doing the images in PS, slice in PS or IR, and use DW to generate the JavaScript.
SH
Shawna_Heffernan
Jan 8, 2004
Thank you so much!

Must-have mockup pack for every graphic designer 🔥🔥🔥

Easy-to-use drag-n-drop Photoshop scene creator with more than 2800 items.

Related Discussion Topics

Nice and short text about related topics in discussion sections