HTML5 and rollover images

Hi there.
Just wondering if there's any workaround for using rollover images when publishing to HTML5.
I've also noticed that links and widgets don't always work correctly when publishing to HTML5. Will I just have to publish everything as SWF?
Thanks.

Almost all widgets that have ever been created for Captivate are SWF and therefore NOT compatible with HTML5 output. If you have SWF widgets in your project and you want them to work then YES you will need to output as HTM/SWF instead of HTML5.
In the mobile world, there is no mouse. So rollover needs to be re-developed as a tap or swipe. Effectively a click or drag.

Similar Messages

Help! needed with behaviors - iFrames (open URLs and rollover images)

I'm able to target an iFrame and open a series of images from text link numbers on same page.
But I'm not able to simultaneously target another smaller iFrame and have a thumbnail of the same image load
when the full size image loads in the full size iFrame,
nor can I get a rollover image to load in the smaller thumbnail iFrame when I mouseover the text link numbers.
I have nav link mouseover images on the same page, so I numbered the thumbnail mouseovers consecutively after the navbar mouseovers.
Previously, thumbnail mouseovers had been numbered beginning with Image1 like my nav bar mouseovers,
and thumbnail images would load in my nav bar,
but now they won't load at all.
Suggestions?
See - http://dstall.com/ld/products/priest/byzantine/

OK, I got swap image to work for both images, but it's still not doing what I want.
See 1, 2, 3 under 'Accessories' in left div - http://dstall.com/ld/products/accessories/
Mouseover of each number loads appropriate thumbnail AND full size image.
I want mouseover to only load thumbnails, then on mouseout, load thumbnail corresponding to full size image that is currently loaded.
When clicking on a number, I want corresponding thumbnail and full size image both to load and to remain loaded.
Please check/correct my source code.
Here's how I constructed swap image -
I highlighted my text 'number', entered placeholder link (#), left 'target blank', selected onClick, then SwapImage behavior -
SwapAction then appears next to onMouseOver even though that's not where I had applied the behavior.

Spry submenu colors and rollover images

New both to spry as well as creating flyout menus. I've spent
hours attempting to use the spry menus properly, but have hit a
brick wall in a couple of areas.
First (and I'm sure I must be missing something incredibly
obvious), I would like to have the background of my submenus a
different color than that of the main list. Somehow, I just can't
get it right.
Second is my need to for a different rollover effect for
different items in the first list. I need a different sized gif
shape to highlight the main words in the initial list. Through
switching out the default rollovers in the css, I can have a custom
image, but not a separate one for each selection.
Any advice (other than read a tome or two on css - I'm
running low on time for this :)?
Thanks

Spry is part of Adobe. This forum, though owned by Adobe, is
volunteer
staffed. By "our products" I was referring to my company's
products. We make
add-ons for Dreamweaver but we are an independent company
with our own
support system. Spry is very new and the documentation is not
really
targeted at beginners. It would seem you could benefit from
one-on-one
support, which you should be able to get by contacting Adobe
Customer
Support directly. I believe there are 2 or 3 free support
calls you can make
before charges are incurred. But you might get lucky and find
someone on the
forum who has the time and the knowledge to help you - it's
just not
guaranteed that you will.
Al Sparber - PVII
http://www.projectseven.com
Extending Dreamweaver - Nav Systems | Galleries | Widgets
Authors: "42nd Street: Mastering the Art of CSS Design"
"Amandaish84" <[email protected]> wrote in
message
news:[email protected]...
>I apologize I was un-aware that I couldn't get help here
because I didn't
>know
> that Spry isn't a part of Adobe, in fact until I
recently purchased CS3 I
> never
> heard of it. I just came to this forum because I found
it under 'support'.
> I
> thought maybe I needed to do something different with
coding in
> dreamweaver to
> make the changes I needed/wanted to change. I also saw
an example of what
> I am
> looking to do on adobe's training dvd that came with the
software. It
> skipped
> over the steps on how to get to that point though, so I
thought coming
> here was
> the right thing to do since there are no books out yet,
I can't go to my
> college I graduated from because they're still using MX
2004 and I
> honestly
> wasn't sure where to go. If I would have known that I
had to go somewhere
> else
> (which I don't even know who to go to then about Spyr) I
wouldn't have
> wasted
> anyone's time here or bothered you with this. What
confuses me is when you
> said
> "this is not about one of our products" well then where
do I go? And you
> also
> said this is a user forum not a support forum, then why
was I directed
> here by
> going to the support button? You probably think I sound
nasty but I'm not
> trying to, I hate writing this because you can't hear my
tone of voice.
> I'm
> just not sure where to go, am I supposed to call Adobe?
I was under the
> impression that was for help with having software
problems such as the
> program
> not installing properly.
>

Images and rollover images

This question was posted in response to the following article: http://help.adobe.com/en_US/captivate/cp/using/WSA2E0A6EA-A192-4d38-8C15-5E589ACEF374.html

It is not really necessary to store them in the Gallery, you can just put them where you want and point to them using the folder icon that appears next to Image Button when you choose that type. Pointing to one out of the 3 images is sufficient, if the 3 images are in the same folder and have the correct names xxxxx_up, xxxxx_down, xxxxx_over (xxxx is the name of your choice, do not make it too long or you'll have issues with the width of the dropdown list).
I'm a bit wondering about the subject line and your sentence '... one can use an image I created in PS'.... If you are using Captivate 6 another way is to use a shape that can be converted to a button and fill the shape with the image. Difference with normal buttons is that you only have two states (automatically, you do not need to create two images): up and pressed.
Lilybiri

Bring to front/back and rollover images on Question slides

Hi All-
My feedback captions show through revealing the content underneath. There is not an option to make them opaque. Also, Captivate allows me to insert a rollover caption on a Question Slide (as opposed to a button which it does not allow) but the rollover doesn't work. Suggestions? Please see me pdf attached.
Thank you!
Rita

All objects that are default to question slides (no separate timeline visible) are on top of the other objects. That has not changed.
I found some tweaking possibilities for shapes but that first rule is still valid: http://blog.lilybiri.com/want-a-button-on-question-slide-in-captivate
Lilybiri

Rollover Images and Captions

Can anyone give me a short, step by step way to
create rollover images with captions. I couldn't manage to get that
done, and when I read the Help screens within the application, it
didn't help either.
In particular, here was the problem: I was in Storyboard with
the slide highlighted that I wanted to add the rollover image and
caption. When I went up to the Insert drop-down menu and clicked on
Rollover Images, there were no images; I was simply taken to My
Documents.
I hope somebody can help. I've spent more than 4 hours trying
make this work. I'm SURE it's some little detail that I've failed
to pay attention to.
THANK YOU!
Dean

Hi Dean,
The "little detail that (you) failed to pay attention to" is
just that. In order to insert an image, you have to select the
image to insert. Use Windows Explorer (from \\My Documents\) to
navigate to \\My Documents\My Pictures\ or whereever else you keep
the image you wish to insert, and select it. Understand, it is up
to you to provide the image . . . it's not like you are selecting
from Captivate's own image gallery (though that is a cool idea, now
that I think of it - LOL!)
Your question indicates to me there might be some confusion
about what you want. You said you want "rollover images with
captions". There are rollover images which are just images to which
a mouseover action has been applied, and there are rollover
captions which are just normal captions to which a mouseover action
has been applied ... but there are no rollover images
with captions. The only way to have a rollover display a
caption is to create it yourself. And the "step-by-step" for doing
that is totally dependent on which image editor you are using
(Photoshop, Paintshop Pro, Paint, etc.). But the gist of it is
below.
1) Open the image in your image editor - or create it there
2) Expand the canvas to create extra "blank" space on the
image (for the caption)
3) Use the "Text" tool to create your caption text and add it
to that blank space.
4) Save the image - BMP format works very well, but any
format supported by Captivate.
5) Close the image editor
6) Open or switch to Captivate and the slide on which you
want to place it.
7) Select "Insert > Rollover Image"
8) Select the image (with its included caption)
9) Set its attributes and position it on the slide.
Hope this helps. The reason you wont' find this in the "Help"
files is because it is a creative use of images that is not a
supported function of Captivate itself. If you would like to see
future versions of Captivate support the creation of
images-with-captions, the way to do it is to submit it as a feature
request. The form to do that
is
located at this link
Hope this helps.

Rollover and swap image

Hi, I've created a rollover image that also replaces another
image elsewhere when rolled over. The original rollover does not
return to it's original state on roll out.
Any ideas?
Thanks Chris
<td width="100" height="20"><a
href="philosophy/philosophy.htm" onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('philosophy','','images/navigation/philosophy_over.jpg',1);MM_s wapImage('black_band','','images/navigation/philosophy.jpg',1)"><img
src="images/navigation/philosophy_up.jpg" alt="Philosophy"
name="philosophy" width="100" height="20" border="0"
id="philosophy" /></a></td>

Do not use the automatic restore.
Apply a standard mouseover rollover to image1 to swap in
image1b and to swap
image2 to image2b. Do not enable the restore option. Make the
event
onmouseover.
Apply a second image swap behavior to swap image1 back to
image1, and image2
back to image2. Do not enable the restore option. Make the
event
onmouseout.
I note from your code that you have applied TWO onmouseover
events for the
original swap. Don't do that. Apply the behavior once, but
make that one
application swap both images, i.e., do not swap one image,
click OK, and
apply it again. Swap the first image, then find and select
the second
image, and swap it as well before clicking OK.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Tun Tun bags of fun" <[email protected]>
wrote in message
news:fm7jg5$f4c$[email protected]..
> Hi, I've created a rollover image that also replaces
another image
> elsewhere
> when rolled over. The original rollover does not return
to it's original
> state
> on roll out.
>
> Any ideas?
>
> Thanks Chris
>
> <td width="100" height="20"><a
href="philosophy/philosophy.htm"
> onmouseout="MM_swapImgRestore()"
>
onmouseover="MM_swapImage('philosophy','','images/navigation/philosophy_over.jpg
>
',1);MM_swapImage('black_band','','images/navigation/philosophy.jpg',1)"><img
> src="images/navigation/philosophy_up.jpg"
alt="Philosophy"
> name="philosophy"
> width="100" height="20" border="0" id="philosophy"
/></a></td>
>

How do I scale a lot of images using CSS in HTML5 and CSS3

I have a CSS image gallery that displays a larger photo with descriptive text below it, when a thumbnail image is hovered on.
Each photo has code like that following:
<a class="thumbnail" >
<img src="thumbs1/paradethumbs/DSC_0073.jpg" alt="thumbnail picture" />
<span><img src="pics1/paradepics/DSC_0073.jpg" alt=" " /><br /> 19 - a black faced sheep.</span>
</a>
The first source is a thumbnail, image stored at a size of 72 by 48.
The second source is an image stored at 600 x 400.
When the thunbnail is hovered on, the larger photo is displayed at its full size using css.
There are 20 or so thumbnails in this gallery, and different numbers in other galleries that use the same code.
The example above is number 19 from 20.
This works fine on tablets and larger displays.
When I wish to show it on an Iphone or similar, with a display that is 480 or less wide, I need to scale the larger photo down to 300 wide.
As the Iphone will have a lower quality of image than a larger display, it will not matter too much if the 600x400 photo is scaled down, and having tried it by giving it an ID with CSS like
#imagescale{ width:300px; } it looks acceptable. However, as IDs are supposed to be unique, then thats a no go area for the remaining photos.
My problem is how do I select the second image source shown in bold above, and scale it and the span text by 50%.
The text is not too important as it can be changed to fit - the image is the main problem.
I need someting like "if the display is less than 600 and the image is in the pics directory, display it at 300 wide".
The browser will hopefully take care of the height.
Any suggestiosn would be appreciated.
Howard Walker

Thanks Nancy. The general idea and the link to the article helped a lot.
However, the css using using a percentage had unpredictable results when selecting repeated images.
The first one scales to 50% and then the next scales to 50% of the last one (25%) and so on ad infinitum, unless you click on another object that is not an image.
Using a pixel size like 280px rather than a percentage did the trick, but it also involved changing lots of other items before I could get everything to fit.
Now I have a better knowledge of media queries and how to set them up.
Best of all, all my image galleries work fine just using css and html. Never thought that would happen.
Take five stars!
And the same to David Powers for his great article.
Howard Walker

Applying Lightbox2 to Rollover Image

Sorry in advance, Im super new to this stuff.
Im having trouble applying the lightbox2 code to my rollover images, everything seems to work fine but when I click on the rollover the lightbox window opens and the loading symbol displays and thats it, just keeps spinning around.
This is the code:
<a href="stat1.jpg" data-lightbox="stat1" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','images/players_02.jpg',1)" ><img src="images/playeron_02.jpg" alt="Mr T" width="123" height="191" id="Image11" /></a>
Any help would be much appreciated pleeeeeeeeeaaaaaaasssse!!

Copy and paste the following code into a new, blank document. SaveAs test.html and preview in browsers. Replace the placehold.it images with your own.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5, with Fancybox2 Viewer</title>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<link href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.css" rel="stylesheet" media="screen">
<script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.pack.js"></script>
<style>
/**this styles image container**/
#thumbs p {
float:left;
width: 180px;
height: 12.5em;
margin: 10px 0 0 20px;
padding: 10px;
border: 1px solid silver;
/**rounded borders**/
-moz-border-radius: 20px;
-webkit-border-radius:20px;
border-radius: 20px;
/**this styles caption text**/
font: italic 14px/1.5 Geneva, Arial, Helvetica, sans-serif;
color: #666;
text-align:center;
/**recommend using same size images**/
#thumbs img {
width: 160px; /**adjust width to thumbnail**/
height: 120px; /**adjust height to thumbnail**/
margin-bottom: 1.5em;
opacity: 0.75;
#thumbs img:hover {opacity: 1.0}
/**float clearing**/
#thumbs:after {
content:".";
clear:left;
font-size:0px;
line-height:0;
display:block;
visibility:hidden;
</style>
</head>
<body>
<h1><a href="http://fancyapps.com/fancybox/">Fancybox2</a> Viewer with images</h1>

<div id="thumbs">
<p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail 1" /></a> <br />
Caption 1
</p>
<p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail 2" /></a> <br />
Caption 2
</p>
<p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail 3" /></a> <br />
Caption 3
</p>
<p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail 4" /></a> <br />
Caption 4
</p>
<p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120" alt="Thumbnail 5" /></a> <br />
Caption 5
</p>
</div>

<h1>Fancybox with Iframe</h1>
<h3><a class="fancybox" data-fancybox-type="iframe" href="http://example.com">EXAMPLE.COM</a></h3>

<script>
        $(document).ready(function() {
            $('.fancybox, iframe').fancybox();
    </script>
</body>
</html>
Nancy O.

How do I show multiple rollover images on a page inserted dynamically (pulled out of a sql database

How do I show multiple rollover images on a page inserted dynamically (pulled out of a sql database table) using Dreamweaver’s Repeat Region. Example: I have different products each one associated (through their productID) with two images (one that’s showing in the page and one for the rollover effect) that are pulled from a database using Dreamweaver’s Recordset. So I want to end up with a page containing row after row of images(one for every product).When moused over each image will reveal the second (rollover) image for the same product which in turn can be a link(the image itself ) that when clicked leads to a detailed page with more information about the product the image is associated with. To show row after row with images for the different products in the database table I am using Dreamweaver’s Insert Rollover Image command and then the Repeat Region – I have no problem to complete the steps, to insert the image and the rollover one at once and set the paths so they are pulled dynamically depending on the productID they are associated with .I have also no problem to apply the Repeat Region so not only the first image associated with the first product in the table is shown but all of them-a routine and standard procedure when using the Repeat Region to dynamically generate and display multiple rows of data. However, when I preview the page the rollover effect is lost –the images are shown but when moused over the second image does not show. The problem is caused when the Repeat Region is applied-once again I am allowed to apply it but the rollover stops working, a kind of interference. ANY SOLLUTION PLEASE, ANY WORK AROUND.

I gotta tell you, using multiple images for rollover effects is going to be a big challenge in your dynamic scenario.
If this were my product page, I would use thumbnails with a bit of CSS opacity or filters to desaturate and make them full opacity/color on mouse over. Nice effect with much less bandwidth. Easily done globally with CSS code.
Two examples:
http://alt-web.com/GALLERY/GalleryTest.php
http://alt-web.com/TEMPLATES/CSS-Semi-liq-photo-sheet.shtml
Nancy O.

How do you add multiple links to a rollover image?

Hi guys,
I'm pretty much a novice when it come to DW, but i understand some things and can get by with a simple website(i only use design mode).
Anyways, i understand how to use rollovers if its a basic image over image swap. My issue is, I have a link that says "T-shirts" and what i want is when you roll the mouse over that text, it swaps to another text -"1 or 2". Now on the "1 or 2" image, i want to have 2 seperate links on them. I tried using hotspots but to no avail. Everytime, the "1 or2" text comes out as a single link. Is doing this possible? I'm using CS4 if that helps btw.
Thanks!!

I think you're trying to make something that is more complicated than it needs to be... First, as far as I know there is no easy way to accomplish what you're trying to do with a single image...
The first option would be to split your initial image in half, and create a rollover effect on the left half on rollover with the specified link 1, and add a second rollover effect on the right side image so that it also changes. Do the same with the right half image - create the rollover effect along with the link for that image only, then add a rollover script that affects the left side image (I've attached a very basic sample to demonstrate in the zip folder - note that there are two rollover images - each with a separate web link, and each has a rollover effect that affects both buttons...)
Second option is perhaps using a "Dropdown" menu that (on rollover) shows two more links... there are many ways this can be accomplished - the easiest (in my opinion) is by using the "spry menu bar". Once created, you can adjust the colors, fonts etc., and an image could be replaced on the initial link within the css... (my website is still under construction, but hopefully will show what I mean: http://www.jgigandet.com/) If you google "drop-down menu html, you'll find several other alternatives to spry as well...
Hope that helps...
Jesse

Why are my rollover images not appearing correctly in my browser?

I have created rollover images for some of my site navigation, and when I view it in my browser, they are not in the correct place on the page. When I click on each rollover, it eventually goes to the right place when I return to that page, but I must do this to all rollover navigation buttons in order for them to show up in the correct place. The links work fine. I am relatively new to this, so not sure if I am providing all the correct info here. My site is www.pfeiferdesign.com. I am using DW CS4. Would appreciate any suggestions!! Thanks

Where is it you want the navigation to appear?
Try this CSS -
#mainnav {
clear: both;
display: block;
float:right;
margin-right:50px;
margin-top:25px;
overflow:hidden;
padding:0;
width:350px;
Is that anywhere close?

CP7 Rollover images Show up every OTHER slide

I am using CP7 and I have a number of graphics on slide 1 that I have defined to have a 'rest of project' timing. I have made multiple groups of graphics on slide 1 and I have made them to NOT be 'visible in output' this way, when I need them, I can use advanced actions to hide/show them (by group name) when I need them for subsequent slides. I am using slide 1 for this instead of the master slide because I need to define the stacking of graphics fairly specifically (slide 3 and further have some graphics that need to be in front of some things and behind some other things).
The set up is that I have a smart shape with a graphic and I am using it as a button on slide 1 (NOT visible in output and lasts for rest of project). Overlayed over top of my smart shape/button is a rollover image. The two objects work just like a rollover button you would see on the web. There is an advanced action that opens the group that the button is a part of and a few other graphic groups that I need to make it look good. When you click the button, there is another advanced action that is supposed to hide the group that both of those graphics are in, plus the other graphics that make it look good, and then go to the next slide. There is an advanced action on the next slide OnEnter that shows the what is needed for the beginning of the next slide.
So, here's the problem. When I click my button, everything disappears and goes to the next slide EXCEPT the rollover graphic, which stays on the screen and on top of all other graphics in slide 2. The SAME EXACT advanced action is used on slide 2 to go to slide 3 (with the same exact button because they are all really on slide 1 the whole time and just being made visible or invisible). When I click, I go to slide 3 and the rollover graphic is gone. I click the button again (to go to slide 4) and I go to slide 4 but the rollover graphic is BACK AGAIN!
I know that this is a complicated write-up, and I am going to go start from scratch to see if I can replicate the problem with a stripped down version of the advanced actions in a new file, but I am hoping someone can point me in the right direction about what is going on. I have deleted and re-inserted the rollover image, but it still does the same thing. I have re-coded the advanced action and it still does it. I have copied rollover images that DONT have this weird glitch and it still does it.
Anyone have any ideas?

I found a 'workaround' to this problem, but I would still like to know what is going on underneath to make this happen. Since I have all the rollover graphics on the first slide with timing or 'rest of project' I just made an animated button in Flash and imported it as a .swf to replace the rollover image. I changed the smart shape underneath from having the image of the button to being transparent (still have it being used as a button with all the same advanced actions as before). Now the swf handles the rollover and the transparent smart button underneath handles the OnClick action and everything works great.
Not sure what was going on with the rollover images, but at least I was able to get the result I needed.

Can't get rollover images to work as links [was: I have a question if someone could answer?]

I have fixed my page so I can preview it and everything is working fine but now I cant get my rollover images to work as links. When I go to put in the link like normal the rollover behavior stops working and it is just the original image. Any way for me to turn it into a link but still keep the rollover image change?
[Subject line edited by moderator. Please use more meaningful subject lines in future.]

Can you provide a link to your website so we can see what you're seeing?
Without one, you're asking for an answer based on guesswork.

Need help inserting 2 rollover images in a footer

I used two separate rollover images to put in a footer of a
page. When seeing in a browser I only see one rollover, the footer
is big enough I don't understand. Yet if I delete the second
rollover and copy the first underneath I see it in the browser but
after giving the image another name and swapping for the correct
images I disappears. I have no problem using the add hyperlink
which works fine. but the client insists I use the rollover images.
any help?

To add to the advice from Ann, if you visit the Creative Cow website there are a mass of After Effects video tutorials where you will find one that is specifically for your task.

HTML5 and rollover images

Similar Messages

Maybe you are looking for