Inserting HTML rollovers onto a page...

[beejay_86]

Hello,

I've created a rollover image using Photoshop & ImageReady CS, which saves in html format. However when I insert this image onto a page (I'm doing it via Insert>Advanced>HTML then Import) it does not display on the screen when I preview the page in browser... all the individual images formed by slices don't load. If anyone could point out what I'm doing wrong or a way they've done this successfully it would be a major help.

Cheers :)
Beejay

[beejay_86]

Re: Inserting HTML rollovers onto a page...

It's okay, I figured it out. I'm an idiot sometimes.......... I just inserted a new frame and made the contents my html file.

[Girlonthehill]

Re: Inserting HTML rollovers onto a page...

Thanks for providing your solution, Beejay. Hopefully that may help someone else in the future. ;o)

[Robert]

Re: Inserting HTML rollovers onto a page...

Because you are using Photoshop, you will need to make sure that when importing the code into an HTML box in BV:

INSERT>ADVANCED>HTML...Import

**the html code created by Photoshop when saving files differs, depending on how you have your output settings for "Saving Files".
Normally I think it refferences the "src" of the slice images to be in the same folder as the html file while some users have Photoshop place them in a newly created "images" folder alongside the html file.

Either way, the SLICE IMAGES and the HTML file need to be in the same directory(folder) to work properly.

In other words, you should have the

html file with the slice images all saved in the same location

OR you should have the

html file and an "images" folder with the slice images saved in the same location.---once again this depends on how you configure Photoshop to output the file(s) when saving.

The reason why it doesn't work in PREVIEW is because those slice images are not located in the same directory as the preview. Try this:

Preview any page in BV and look at the address bar in your browser window. You should see something like this:

C:\Documents and Settings\***your profile folder***\Local Settings\Temp\preview\preview.html

the images would need to be inside the "preview" folder to work in preview. Here's a trick, navigate to that folder, then right-click and choose "Send to Desktop(create shortcut). Now setup Photoshop to save the slice images in an "images" folder and when you want to preview in BV simply drag-n-drop the "images" folder onto the shortcut to the "preview" folder on your desktop. Now you should be able to have a working preview of your rollover.

---I use this tactic for creating page templates using Photoshop's "save slices as files".