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>

Similar Messages

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?

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/

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

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

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.

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

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

Making Roll over images from photoshop layout

Hello Everyone,
I am working on a website and I have sliced my parts of my Photoshop file.
I have saved as a html with images as well!
How would I amek a roll over image out of the buttons I made in photoshop and sliced?

Best thing you can do is delete that HTML file from Photoshop and use the slices and build the code in Dreamweaver. You will be much better off.
The simplest solution is to save the 2 states of your button as 2 separate images then click on Insert->Image Objects->Rollover Image. Then select your before and after image. Just remember to upload the javascript file Dreamweaver creates during this process or it won't work online.

RoboHelp 8 HTML WebHelp How to display a larger image of a thumbnail by clicking on or rolling over the thumbnail?

How would you display a larger image of a thumbnail by clicking or rolling over the thumbnail?

Hi there
For a mouseover you would have to add some custom developed JavaScript. You could probably find some pre-made on the web if you poked around.
Generally speaking, any way you slice it you will be using two images. One for the thumbnail and one for the full sized image. You could employ the popup functionalty to pop up the larger image.
I used to simply create DHTML drop-downs and insert the large images in the drop-down area.
Cheers... Rick
Helpful and Handy Links
RoboHelp Wish Form/Bug Reporting Form
Begin learning RoboHelp HTML 7 or 8 within the day - $24.95!
Adobe Certified RoboHelp HTML Training
SorcerStone Blog
RoboHelp eBooks

Roll over images not appearing in a preview

I've created a new project and have had had previous success in making roll over images/captions work but now nothing in this new project is appearing when I preview the slide, not the images or the roll over captions. I'm using Captivate 6.
Sorry if i'm not explaining it properly but I've only started using the program this week and have no idea about any of it.
cheers
Emma

Hi Emma
I note you said: Preview the *SLIDE*. And in that type of preview, all you will ever be able to do is to view when objects appear or disappear or move. Interactive objects such as rollovers will never work in the slide preview. You must preview a different way. (Project, Next X number of slides, From this slide, etc)
Cheers... Rick
Helpful and Handy Links
Captivate Wish Form/Bug Reporting Form
Adobe Certified Captivate Training
SorcerStone Blog
Captivate eBooks

1) Drop Down Menu 2) Roll Over Images & 3)

Does anyone know away to make these things possible on iWeb (or if it is not even possible)
1)
I'd like to have a drop down menu so that my sites are not so cluttered.
Here is an example:
http://www.drsteinhealing.com/doctor/chiropractor/2L/Encino/homepage.htm
2)
I have seen rollover images in flash, but I hear that it is possible without flash and I think it would be great to have some pictures as such for the menu. I would think this would be possible because right now there is a rollover color change to words that are links if you want it to change colors... so:
a) is flash possible on iWeb
b) even if it is not: is there a way to have rollover images and
c) can there be roll over images that are also links?
Here is an example:
http://planetrobyn.com/ (the pictures go from black and white to color and then they are also the menu)
I'm learning so it would be great to see if these things are possible. Thank you.

See these menus.The menus are HTML and CSS only.
http://www.wyodor.net/Demo/iWebeend.html
http://www.wyodor.net/_Demo/tmf/Duckmenu.html
The first menu has the menu hardcode in the published webpage.
Check the source to see how it's done.
The second menu has a textbox at the top of the page. A JavaScript in the HTML Snippet finds that textbox and place the menu in it.
This is pasted in the HTML Snippet :
<script src="../../../duckmenu/duckmenu.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">

</script>
This JavaScript places the menu in the textbox :
http://www.wyodor.net/_Demo/duckmenu/duckmenu.js
The menu at drsteinhealing is HTML/CSS only too. So if you like it, grab the code + stylesheet and use it.

Image roll over

Similar Messages

Maybe you are looking for