Fixed Image roll over question....

I am putting the finishing touches on my photography business site (www.colbybrownphotography.com) and came across an interesting problem. Instead of using iWEB's photo gallery pages (which I can't stand) I decided to set up my page as an art portfolio with an "art gallery" feel to it. The photos in my "home" section are set up as links so when I roll over them they list where they are redirecting you, but in my actually gallery they are fixed images. Is there any ability to add roll over text to those photos where I could possible talk about the particular photo that the mouse scrolls over? I knew I would be limited when I decided to use iWeb to put together my site but I have been surprised lately with at least a few of the ideas I figured would be out of its technical reach. Thanks in advance.
Colby

There's also this +Tooltip DHTML Library+. At the following link, mouseover the image there...
http://www.walterzorn.com/tooltip/tooltip_e.htm
...I don't know how easy these scripts are to incorporate into an iWeb site using +HTML Snippets+, but if you get them working, please post back here explaining how you did it.
The following thumbnail viewer is beyond what you were asking for, but anyway, click on the examples here and watch the captions drop down...
http://vikjavev.no/highslide/

Similar Messages

Indesign roll over question

I have 2 images on a layout called "A" and "B". I Also have on the layout an image called "Button" with is a button. My 4th image called image “C” is the pop up image that pops up when the button image is moused over. I have placed image “C” on the very top. But when I roll over the button image, the “C” image only pops up over image “A” but not “B”. I have made sure images “A” and “B” are in the back and image “C” is in the front. How can I get image “C” to pop up over both image “A” and “B”. Thanks.

Thanks so much, Ken for your answer.
I made this site years ago in Adobe GoLive, and wanted to update it in
Dreamweaver.
http://www.brendamolloy.com
Thanks again for your help!

Having problems with swap image (roll over effect)

I am trying to do a roll over state (swap image) for a linked item on my mock up. I've done this for other pages in the same file, but for some reason on another page, when I build the second state, insert the slice, and create the swap image on the first state, it previews in the browser with just a white screen and the section that I sliced. How come it is showing a white page in lieu of my entire mock up with the roll over effect?

I am trying to do a roll over state (swap image) for a linked item on my mock up. I've done this for other pages in the same file, but for some reason on another page, when I build the second state, insert the slice, and create the swap image on the first state, it previews in the browser with just a white screen and the section that I sliced. How come it is showing a white page in lieu of my entire mock up with the roll over effect?

Roll over question

I'd like to roll over text on a page, and have it change in color, AND have an image show up on the page. Is there any way that I can do this?
Thanks in advance.

Thanks so much, Ken for your answer.
I made this site years ago in Adobe GoLive, and wanted to update it in
Dreamweaver.
http://www.brendamolloy.com
Thanks again for your help!

Image roll over

Can someone point me in the direction to where I can
learn how to write the script for this roll over effect. Is is a
combination of Jave and Flash. Here is a link to an example of what
I am talking about.
http://www.istockphoto.com/file_search.php?action=file&text=airplanes&x=14&y=4
Thanks
Dan

I don't think that involves Flash or Java, actually. It looks
like a JavaScript function. Each thumbnail has code like this:
onmouseover="showtrail('
http://www1.istockphoto.com/file_thumbview_approve/2409748/2/istockphoto_2409748_jet.jpg', 'Jet','A
commercial airliner prepares to land.','5.0000','1','1',253,1);"
onmouseout="hidetrail();"
which refer to JavaScript functions showtrail and hidetrail.
Those functions are probably contained in one of the JavaScript
files loaded in the head of the HTML document:
<script language="javascript"
src="/js/scriptaculous/prototype.js"
type="text/javascript"></script>
<script language="javascript" src="/js/utility.js"
type="text/javascript"></script>
<script language="javascript" src="/js/search.js"
type="text/javascript"></script>
<script language="javascript" src="/js/styleswitcher.js"
type="text/javascript"></script>
<script language="javascript" src="/js/dom.js"
type="text/javascript"></script>
<script language="javascript" src="/js/sifr.js"
type="text/javascript"></script>
<script language="javascript" src="/js/popupbox.js"
type="text/javascript"></script>
<script language="javascript"
src="/js/filesearchhover.js"
type="text/javascript"></script>
<script language="javascript" src="/js/copyspace.js"
type="text/javascript"></script>
<script language="javascript" src="/js/lightbox.js"
type="text/javascript"></script>

Setting the order of a roll over image in a quiz

Hi,
I'm using captivate 4 and having issues in setting a quiz for my students.
I want to have an icon to roll-over so the students can access information relating to the question, eg, diagrams, tables, graphs etc.
I have done all this yet when the roll over image appears its order is set behind the question and answers, I need it in front. when trying to change the order, eg bring to front, all the options are grayed out and not available. Is there a way to fix this as I know I cannot use a slidelet in a question slide.
I have also tried to re-order the question and answer text, but is is also grayed out.
Any help would be greatly appreciated
Cheers
Andrew

Hello,
You cannot insert interactive objects on any default question slide from pool or not. You will have to change the action to be executed on Success/Failure. There it is possible to jump to a slide.
Beware: you can never jump to a slide that is outside of the quiz 'scope'. This scope starts with the slide where you have the first scoreable object, which can be a question slide but also a button/click box/TEB with a score. The scope typically ends with the score slide. So be sure that the slide you want to jump to are in that scope. Eventually you can add a scoreable object (with a low score perhaps of 1pt) like a button or click box to the first slide of your project. If you keep the score slide as the last slide you will not have to worry anymore about the scope.
Hope this makes sense,
Lilybiri

Swap images while rolling over popup menu

Hello,
I've been playing with fireworks CS5 for some days now and made a first attempt on a website.
So far, i've made a navigation bar with two states in order to be able to add a simple roll over behavior, e.g. darkening text on rollover. I also have been able to make a dropdown menu (popup) via slices.
Then I decided to swap images when on nav bar headings. So far, so good.
When I did a preview in my browser, it appeared that as soon as I was leaving the nav bar, the image swapped back to the old setting. Perfect.
But when I did a mouse over on one of the dropdown menu's of the navigation bar, the image swapped back as well.. I've been trying, but didnt manage to find out how to fix this.
So, is there anyone here that knows if it is possible, and if so, how to keep images swapped to a second stage as long as the mouse is on the dropdown menu, but swaps back to the original state when leaving the dropdown and/or the navigation bar.
Thanks in advance,

Hi Bryan,
It may be possible to cheat and put this onto the button:
the option that you want is called TITLE.
if you set one of the other parameters (e.g. the label)
to be:
LABEL_TEXT" TITLE="TITLE_TEXT
basically when it adds the text onto the form it will wrap it in "
If it doesn't strip out the " from your text you should get your extra parameter.
it may slip past the portal checking.
I can't test it as I only have WebDB, but I have done something similar with javascript in WebDB.
good luck
Michael

Metadata ? Login before download? Mouse over image? Three questions...

Three questions:
1) Can I add metadata to pages made with iWeb? Does it have to be done in an external application (and if so why)?
2) I would like to propose a PDF document (a catalogue of services) that can be downloaded from my site but only to visitors who have logged in or at least left their identities (I want to know who has downloaded the catalogue and to be able to contact them afterwards).
3) I want to have a roll-over image which will show a photograph before and after retouching, switching between the two as the mouse cursor goes over the picture. Can I do this in iWeb?
Any ideas?
Many thanks!

2 - as already suggested you can use a form site to create a form to give you the information you need. DYou can add the form to a web page with an HTML Snippet and iFrame code like in this demo page. The code used is also shown. on't know if you can set it up to download the pdf file but you might be able to add a link to the zipped pdf file which would immediately download the file.
3 - to do the rollover that you want would require javascript and a snippet. Do a search in this forum for "rollover" and you'll a number of topics where it's discussed. Cyclosaurus is the resident expert on javascript.
OT

Roll over images in a slide show

I am trying to make a slide show of before and after images for a client.
Rather than just have them all one after the other, I want all the after images to display as normal, and the before to display on hover for each slide.
I can make this work in a basic slide show when rather than adding an image to the Hero Image box, I use the fill and states.
However this only allows me to do one, as I can't add any more empty Hero Image boxes (or I don't know how to do that, is it possible?)
When I add an image via the slide show menu it appears on top of any fills, and I can't seem to give images added this way a roll over state.
Can anyone tell me how to either add extra blank Hero Image boxes, or how to apply the effect I want to the images in the Hero Image boxes.
Thanks in advance, if there is any further info I can provide about my problem, please let me know!
M

Hi,
You cannot add multiple hero image boxes within the same Slideshow. Now , you can use different slideshows for your different images but that wont give you the slideshow effect but you will be able to see all your after images at once and then if you rollover them you would be able to see the before images.
Now, In order to create the effect that you want, what I would suggest you is to use a 'Composition widget'. In the composition widget, you can make the triggers as small thumbnails for your images and in the Target you can set the fill as your after image and in rollover state you can use the before image. After this you can use the Autoplay feature available in the composition widget and you will get the desired result.
Hope this helps
Regards,
Rohit Nair

How do I fade in a roll over image

Hi,
I have a roll over text/png to link on my home page that I would like to fade in.
I saw something on the net and tried it and it didn't work.
Any thoughts? I realize these won't CSS work on all browsers. Should I go to Java?
My home page: www.adjacentdimensionsmedia.com
HTML:
<div class="clearovalfortree">
<a href="portfolio.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image10','','images/treewithtextversion3.png',1)" class="opacity" >
<img src="clearovalfortree.png" alt="text for tree2" width="800" height="600" id="Image10"></a></div>
CSS:
img.opacity {
opacity: 0.5;
filter: alpha(opacity=50);
-webkit-transition: opacity 1s linear;
img.opacity:hover {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transition: opacity 1s linear;
Paul

All you need to do is place the images on top of each other and change the opacity of the top image on hover as in
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<style>
#test {
    width: 800px;
position: relative;
margin: auto;
#test img {
    width: 800px;
position: absolute;
left: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
#test img.top:hover {
opacity: 0;
</style>
</head>
<body>
<div id="test">
    <img class="bottom" src="http://www.adjacentdimensionsmedia.com/images/treewithtextversion3.png" alt="">
    <img class="top" src="http://www.adjacentdimensionsmedia.com/big-tree-final1.jpg" alt="">
</div>
</body>
</html>

I want to create a Roll Over on part of an image.

Good day.
I would like to create a HTML page like this: Cherry Hill Mall | Directory for a Mall.
My plan is to create a image and then trace the specific store like a hotspot and then link a roll over to it. But I'm not sure if its possible. Is there perhaps a better way of doing this.
Kind regards
Joleen

I agree with Murray's suggestion about maphighlight. You'll also need some stylish tooltips for the detail boxes.
Tooltip | jQuery UI
http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/
Nancy O.

The roll over feature doesn't work for customizing, is there a way I can fix this

I always have to change my browsers theme to see what it looks like, instead of just roll over. Is there a way to fix this?

Previewing a persona only works on sites that are whitelisted via an allow exception.
You can see the permissions for the domain in the current tab in:
* Tools > Page Info > Permissions > [X] Install Extensions or Themes
* Tools > Options > Security : "Warn me when sites try to install add-ons": Exceptions
Make sure that you do not use [[Clear Recent History]] to clear the 'Site Preferences'.
See http://kb.mozillazine.org/Themes#Lightweight_theme

Roll over to view larger image, click to select

Which combined server behaviors or technologies would allow
me to create a dynamic image gallery of thumbnails that when you
roll over any thumbnail image (images are populated via repeat
region recordset behavior), you can view a larger image. Selecting
a thumbnail would select the larger image version.
I do not need to know how to create the thumbnail images
(this would be achieved via aspjpeg with a repeat region applied to
it) but rather how to make it work as explained.
check out
https://www.schooloutfitters.com/catalog/product_info/pfam_id/PFAM898/products_id/PRO987
for an example.

OK so I'm almost there! A little more help if it's not too much trouble.
I've used the "mouse-over to enlarge" example and it seems to be working.
The images sit together top left (ie. the larger image appears over the top of the smaller image and both top left corners of the images sit in the same x and y position - it appears to grow to the right and down!). Can I change this so that the images sit in the same position bottom right and the image grows bigger, up and right?
Alternatively if it's easier I could do "mouse-over and click", but I need the click to open my image in a new window, sized to the image (so I can still see the main page in the original browser window).
Thanks again
Lopoc

Linked images "jump" when rolled over

When rolling over an image being viewed on a page in IE/Mozilla, it seems to "jump" if it is linked to a larger version of the same image. Am guessing it is a setting in Page Properties, but I believe I've changed just about everything with no luck.
The actual code of an example is: <td width="250"><div align="center"><a href="http://www.meistersoftware.com/images/tmp_pkg.jpg"><img src="images/tmp_pkg_tn_f8.jpg" width="140" height="101" alt="sc tmp" /></a></div></td>
Any suggestions? Please be gentle if it's a blatantly obvious error

Would be glad to but it's not online yet. Here's the entire <div> Hopefully, it may shed some light -
<div align="center">
<table width="575" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td colspan="3" ><blockquote>
<hr align="center" height="2" width="480" />
</blockquote></td>
<td> </td>
</tr>
<tr>
<td width="17"> </td>
<td width="250"><div align="center"><a href="http://www.meistersoftware.com/images/tmp_pkg.jpg"><img src="images/tmp_pkg_tn_f8.jpg" width="140" height="101" alt="sc tmp" /></a></div></td>
<td width="16"> </td>
<td width="272"><div align="center"><img src="images/pzl_icon_r21.jpg" width="83" height="83" alt="pzl_icon_l" /> <img src="images/pzl_icon_l45.jpg" width="83" height="83" alt="cryptoquote" /></div></td>
<td width="20"> </td>
</tr>
<tr>
<td height="15
"> </td>
<td><div align="center"><strong style="color: #036; font-size: 18px;"><a href="http://www.meistersoftware.com/t_main.html" style="color: #036; font-size: 21px;">TicketMeister</a></strong><a href="http://www.meistersoftware.com/ticketmeister.html"><span style="font-size: 10px; color: #036;">©</span></a></div></td>
<td> </td>
<td><div align="center"><strong style="font-size: 18px; color: #900;"><a href="http://www.meistersoftware.com/z_main.html" style="color: #900; font-size: 21px;">PuzzleMeister</a></strong><a href="http://www.meistersoftware.com/puzzlemeister.html"><span style="font-size: 10px; color: #900;">©</span></a></div></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td height="15
" style="font-size: 12px"><blockquote>
<p align="left"> • Print<strong> Raffle Tickets</strong><br />
• Reserved Seating<br />
• Consecutive Numbering<br />
• Chinese Auction Cards</p>
</blockquote></td>
<td> </td>
<td style="font-size: 12px"><blockquote>
<p align="left">• Create and Solve Puzzles<br />
• <span style="font-weight: bold">Boggle</span>, <span style="font-weight: bold">Jumble</span>, <span style="font-weight: bold">Cryptoquotes</span><br />
• All levels of difficulty<br />
• 200,000+ word dictionary</p>
</blockquote></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><div align="center"><strong><em style="color: #036"><a href="http://www.meistersoftware.com/products/ticketmeister" style="color: #036">ONLY 29.95!</a></em></strong></div></td>
<td> </td>
<td><div align="center"><strong><em style="color: #900"><a href="http://www.meistersoftware.com/products/puzzlemeister" style="color: #900">ONLY 17.50!</a></em></strong></div></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="3" style="font-size: 12px"><blockquote>
<hr />
</blockquote></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td width="250"><div align="center"><a href="http://www.meistersoftware.com/images/bms_pkg.jpg"><img src="images/bms_pkg_tn_f8.jpg" width="125" height="107" alt="sc bms" /></a></div></td>
<td> </td>
<td width="272"><div align="center"><a href="http://www.meistersoftware.com/images/pms_pkg.gif"><img src="images/pms_pkg_tn_f8.jpg" width="152" height="115" alt="tmp tn" /></a></div></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><div align="center"><strong style="font-size: 18px; color: #f00;"><a href="http://www.meistersoftware.com/b_main.html" style="color: #F00; font-size: 21px;">BingoMeister</a></strong><a href="http://www.meistersoftware.com/bingomeister.html"><span style="font-size: 10px; color: #f00;">©</span></a></div></td>
<td> </td>
<td><div align="center"><strong style="font-size: 18px; color: #060;"><a href="http://www.meistersoftware.com/p_main.html" style="color: #060; font-size: 21px;">PrintMeister</a></strong><a href="http://www.meistersoftware.com/printmeister.html"><span style="font-size: 10px; color: #060;">©</span></a></div></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td style="font-size: 12px"><blockquote>
<p align="left">• Print <strong>Bingo Cards</strong><br />
• 1-on, 2-on, <em>ANY</em>-on<br />
• Numbers, Pictures or Text<br />
• w/ <strong>Pop-Out Bingo Clipboard</strong></p>
</blockquote></td>
<td> </td>
<td style="font-size: 12px"><blockquote>
<p align="left">• <span style="font-weight: bold">Door Hangers</span>, Envelopes<br />
• Wallet Calendars, <span style="font-weight: bold">Bookmarks</span><br />
• <span style="font-weight: bold">Post Cards</span>, Business Cards<br />
• Even a<strong> Page Numberer</strong>!</p>
</blockquote></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><div align="center"><strong><em style="color: #F00"><a href="http://www.meistersoftware.com/products/bingomeister" style="color: #F00">ONLY 24.95!</a></em></strong></div></td>
<td> </td>
<td><div align="center"><strong><em style="color: #060"><a href="http://www.meistersoftware.com/products/printmeister" style="color: #060">ONLY 19.95!</a></em></strong></div></td>
<td> </td>
</tr>
<tr>
<td height="9"> </td>
<td colspan="3"><hr /></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="3" style="font-size: 18px; color: #036;"><div align="center">
<p><strong><a href="http://www.perforatedpaperonline.com"><span style="text-align: center; font-size: 24px;">www.perforatedpaperonline.com</span></a><br />
</strong><span style="text-align: center; font-size: 14px; color: #000;">(Our sibling site)</span></p>
</div></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="3" style="font-size: 18px; color: #036;"><p style="font-size: 14px; color: #000; text-align: center;">We also manufacture<strong> <a href="images/m_paper_supplies.html">blank, pre perforated paper</a></strong> for all of our software.</p>
<p style="font-size: 14px; color: #000; text-align: center; font-weight: bold;">• <strong>door hangers • raffle tickets</strong> <strong>• post cards</strong> • <strong>bookmarks</strong><span style="font-size: 12px; color: #000; text-align: left;"> • </span>bulletins</p></td>
<td> </td>
</tr>
>
</table>
</div>

Roll-over images

Does RoboHelp support roll-over images?
I've tried every way to insert a roll-over image into my
project, including editing the html page in dreamweaver but as soon
as I open it up in RoboHelp and generate it the images either does
not change or it is not visible.
Please advise...
Thanks,
Susy Carrillo

You might take a look at
Walter
Zorn's free tooltip utility, a really neat onMouseover
application that makes your tooltips look like popups, including
the use of links within them.
You can use it for text links or in combination with image
maps. So far, I'm using only the former, but I'll be using the
latter for some new, complex C# screens in our next version
release.
There are a few things that can trip you up, such as: all the
HTML inside the Javascript area (the
escape('Some text') portion) cannot have carriage returns;
and certain characters must be escaped with a backslash (such as
replacing double quotes with backslashed single quotes). However,
it's all explained quite well on his site. You can control
backgrounds, transparencies, images, placement, etc.
As Peter says, do all your testing in a scrub project before
going live in the real one.
Good luck,
Leon

Fixed Image roll over question....

Similar Messages

Maybe you are looking for