putting a rollover gif into an iweb template

Are you hosting your site on .Mac or another host?

Either way, at the very least you'll need to upload the HTML files that you have now to your server. If you are hosting with .Mac, then the easiest place to put this is on your iDisk/Sites/ folder. This would be the first step in getting the stuff into your iWeb page. As you can see, it isn't going to be as simple as drag and drop like for regular images. But it won't be that difficult either. You'll be doing a bit of editing of the iWeb generated HTML files.

I assume that you have all the files associated with this image in a folder. Just copy the whole folder into iDisk/Sites/ and you should be able to access the image with a browser using the following URL format:

http://homepage.mac.com/username/foldername/index.html

username = your .Mac account username
foldername = the name of the folder you copied to iDisk/Sites/
index.html = the name of your default start file.

Anyways, once you have gotten the image folder copied to your iDisk/Sites/ folder or your server, post back and let me know the URL that you use to access the image. We can go from there...

Here's an example of something similar on my iWeb pages...

http://web.mac.com/jwtseng/iWeb/kate/MyWorld/F6991CBD-9280-4D0F-8563-5BD9FACE8BC 6.html

Your graphic is great! Looks good! The animated GIF works well, too! You'll have to experiment around with this and see which one you prefer (since the animated GIF is pretty much drag and drop). There are a couple of different ways that you can get your rollover image into your page. I'll go over the easier way...

It's going to take a little bit of editing of the HTML file generated by iWeb for your page. This is the code that you will be adding:

<iframe src="http://homepage.mac.com/benhillisdesign/shockrollover/shockingroll.html" width="700" height="400" scrolling="no" border="0" style="border:none;" frameborder="0"></iframe>

And here is what you need to do in order to find the exact place to put the code...

1. In iWeb, take the existing animated GIF away. In its place add a textbox of the same dimensions (700x400) and drag it into place.
2. Click in the textbox and type in some placeholder text like "ELECTRIFIED". Don't try to format the text or change anything. Just click in the textbox and type.
3. Now publish your page.
4. Go into your iDisk/Web/Sites/iWeb/benhillisdesign/ folder
5. Find the "PLAY.html" file and open it in TextEdit. Make sure to tell TextEdit to "ignore rich text commands" so that you can see the raw HTML code.
6. Search for your "ELECTRIFIED" placeholder text.
7. Replace it with the code above.
8. Select Save under the File menu. Not Save As...just Save.

That should be it. Check your page in Safari. You should see your rollover graphic in place of the textbox. The only issue that I can foresee is the text that you have overlaid on top of the image. I'm not sure how that will turn out. You'll need to experiment with pushing the placeholder textbox all the way to the back layer and then overlaying either textboxes or shapes on top for your text overlay.

Let me know how it goes!

is there any FREE app that can do animated gifs? or similar to the electrified thing? i have graphic converter?

i wanna use this animated "thingi" also as a hyperlink - so in other words a rollover button! is that possible with graphic converter and if yes how?

max

Ben,

iWeb publishes everything into your iDisk/Web/Sites/iWeb/ folder. NOT the iDisk/Sites/ folder (which is where you put other things, like your GIF HTML files).

Do you have desktop syncing turned on for your iDisk? If so, you may need to force a sync in order to see the newly published files.

Otherwise, you files should be right there.

Max...

Try this free application to make GIFs...

http://www.stone.com/GIFfun/GIFfunby_StoneDesign.html

It should definitely be there, you might not be looking at your iDisc. Did you try getting there using the finder menu Go/iDisc/My iDisc? Once it mounts then double clicking it to open it?

That is one of the coolest animated gifs I've seen!

Are you running Tiger? I don't know about the missing buttons. Interesting.

Anyways, if you have the iDisk synching feature turned on, I would turn it off at this point. Eject your iDisk, then remount it and check for the folders again.

Ben!!!!

You did it! Congrats! It looks good. And it functions correctly for me here, too. The rollover effect is fine on my end...no sticking on the electrified frame.

I notice that the graphic is shifted 4 or 5 pixels to the right, though. This sometimes happens. Just go back into iWeb and shift the textbox to the LEFT 4 or 5 pixels to compensate. Then republish.

As you will see, everytime the page is updated, you will need to insert the code into the HTML file again. That's why an application like MassReplaceIt ( http://www.hexmonkeysoftware.com/) can come in handy.