Image rollover in webapps

HI all
I'm stuck. I have a web app with two different image states which I want to use as standard and on hover in the list view.
Normally to achieve this I would set a css class for the two images like so:
.playing{
width: 195px;
height:450px;
display:block;
background:url(/images/catimages/playing-bw.jpg) no-repeat;}
.playing:hover {
background:url(/images/catimages/playing.jpg) no-repeat;}
and then refer to the list item that holds the image as so:
<ul>
<li><a href="/projects/utas-learning-hub" class="utaslearninghub"></a> </li></ul>
The problem is I'm trying to set this up in a web app list layout using a dynamic image tag.
Has anyone come across this before and if so, can you recommend a solution?
cheers
deb

The behaviour you're describing is best implemented with simple javascript.
It would be in the way of a remote portlet written in anything that renders the HTML and then you could use any show/hide <div> script found on the web.

Similar Messages

Why is my image rollover not working in Firefox?

I am starting a new site. In the middle of the page on the right, I have a simple image rollover effect for the UPCOMING EVENTS button. It is also supposed to link to another page (not designed yet). It works in Explorer, not in Firefox. How can I fix this? I suppose I can revert to javascript but it adds a lot of coding to the page. I don't know what to do.    http://jeannettedutton.com/MLVC/

In Menu.css, change this -
#MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
    top: 100%; /* 100% is at the bottom of parent menuItemContainer */
    left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
                    and your personal taste.
                    0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
                    on MenuItemContainer and MenuItem on the parent
                    menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
                    the dropdown with the left of the menu item label.*/
    z-index:0;
    overflow:visible;
to this -
#MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
    top: 100%; /* 100% is at the bottom of parent menuItemContainer */
    left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
                    and your personal taste.
                    0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
                    on MenuItemContainer and MenuItem on the parent
                    menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
                    the dropdown with the left of the menu item label.*/
    z-index:999;
    overflow:visible;

Is there a way set up a tooltip popup that displays alternate text on an image rollover in DW CC?

I would like to set up a tooltip popup that displays alternate text on an image rollover. I am using Dreamweaver CC. Used to be a Spry widget, but those options seem to be gone. Not looking for anything elaborate, just a simple tooltip message box.

Hi Daylilybud,
If you are looking for a tool tip on hovering over the image, try adding attribute -> title="Your text" inside your image tag.
For example <img src="" alt="" title="Test"> .
See if this resolves your problem.

Some nagging CSS image rollover questions

Hi,
I'm using DW CS4 here. I finally got a Top Horizontal Inline CSS navigation to work with CSS image rollovers. Here's the site:
http://www.brightbeltmusic.com
And here are my questions:
-Why, when my original images are 90 px wide x 30 h, do I have to cut the width in the code to 84 px to make things line up?
-I can't seem to set the images by obvious pixel widths - any little thing throws the whole navigation onto the next line and so I have to set the 'Up' image as a repeating background, while shortening the actual image link itself. Is this right? It seems to "work" here but maybe barely.
-Padding seems to always be set in 'ems' - so how many pixels are in an 'EM' ? This is so I can figure out the width issues I always seem to have when I want horizontal rollover images...
-Margin for a # ul apparently effects the very end/outside of the list....Is there such a thing as margins for the individual # li ?
I guess I need a good pointing to a image rollover tutorial for Horizontal inline navigation.
Many Thanks for any help. It just seems like I play a guessing game on the pixel details when I'm trying to construct these types of mavigation.
Thanks, Frank B.

brightbelt wrote:
Hi,
I'm using DW CS4 here. I finally got a Top Horizontal Inline CSS navigation to work with CSS image rollovers. Here's the site:
http://www.brightbeltmusic.com
And here are my questions:
-Why, when my original images are 90 px wide x 30 h, do I have to cut the width in the code to 84 px to make things line up?
Probaby because you are not taking into account padding, borders and margins which add to the width of the container/s
brightbelt wrote:
-I can't seem to set the images by obvious pixel widths - any little thing throws the whole navigation onto the next line and so I have to set the 'Up' image as a repeating background, while shortening the actual image link itself. Is this right? It seems to "work" here but maybe barely.
Mathematicis is critical to the set up. As stated padding and borders, margins etc add to the overall width of a container. So if the containers are too wide to fit in a specific width they will be thrown to the next available space, usually to the next line.
Example: a container which is set at a specific width of 90px and has padding left and right of say 8px is really 106px wide. Therfore if you're trying to allocate space for 6 buttons where each is 90px wide and has 8px padding left/right you need to allocate a space 6 x 106px plus any borders.
brightbelt wrote:
-Padding seems to always be set in 'ems' - so how many pixels are in an 'EM' ? This is so I can figure out the width issues I always seem to have when I want horizontal rollover images...
Personally I would never recommend setting padding in ems. Certainly ems and px don't mix and match very well.
brightbelt wrote:
-Margin for a # ul apparently effects the very end/outside of the list....Is there such a thing as margins for the individual # li ?
li's do have default padding and margins set so these need to be zeroed out.
li {
margin: 0;
padding: 0;
As an experiment copy all the code below, open a new Dreamweaver document and paste it into code view, save it to your site folder with the name navigationTest.html. Run it through a browers and see what the results are like.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#navcontainer {
width: 775px;
margin: 0 auto;
background-image: url(navUp.gif);
background-repeat: repeat-y;
overflow: hidden;
#navcontainer ul {
width: 547px;
padding: 0;
margin: 0 auto;
background-image: url(navUp.gif);
#navcontainer ul li {
width: 90px;
float: left;
margin: 0;
padding: 0;
list-style: none;
#navcontainer ul li a {
background-image: url(navUp.gif);
background-repeat:no-repeat;
color: #fff;
text-decoration: none;
font-weight:bold;
width: 90px;
display: block;
text-align: center;
float: left;
border-right: 1px solid #069;
padding: 5px 0;
font-family: arial, helvetica, sans-serif;
font-size: 14px;
</style>
</head>
<body>
<div id="navcontainer">
    <ul>
    <li><a href="index.htm" style="border-left: 1px solid #069;">Home</a></li>
    <li><a href="Contact_Us.htm">Contact</a></li>
    <li><a href="Profiles.htm">Profiles</a></li>
    <li><a href="Catalogue.htm">Songs</a></li>
     <li><a href="BBL.htm">BBL Label</a></li>
    <li><a href="Jazz_links.htm">Links</a></li>
    </ul>
</div>
</body>
</html>

CSS swap image rollover

Hi all
Can any one point me please to a simple example of an image
rollover using CSS.
You know the ones.. one image as background and another on
top it as your mouse rolls over it
Thanks in advance

Hi,
Take a look at Thierry's example,
http://www.tjkdesign.com/lab/simple-css_rollover.asp
Does this work for you?
Shane H
[email protected]
http://www.avenuedesigners.com
=============================================
Back for 2007, close-up magic:
http://deceptivemagic.com
Web dev articles, photography, and more:
http://sourtea.com
=============================================
Proud GAWDS member
http://www.gawds.org/showmember.php?memberid=1495
Delivering accessible websites to all ...
=============================================
"carlosalt" <[email protected]> wrote in
message
news:eu8qt7$46j$[email protected]..
> Hi all
> Can any one point me please to a simple example of an
image rollover using
> CSS.
> You know the ones.. one image as background and another
on top it as your
> mouse rolls over it
> Thanks in advance
>
>

How do I edit an Image Rollover?

This is driving me nuts. I've got an Image Rollover and I
just want to edit it. The second state isn't on the Properties
menu. Is there no way to get back to the initial dialogue that asks
you to link the two images?
And I truly don't want to be a troll or sound overly
negative, but me and two friends--both of whom have hosted multiple
websites for years--are completely stumped by a myriad of things in
Dreamweaver CS3. I used two versions back (before MX, I think) just
fine and had no real complaints. But our IT guy, myself, and the
other guy can't get images to show correctly, can't figure out how
to edit the rollover, can't get frames to work right. It's very
frustrating. I've bought the Dummies book, watched the tutorials,
and checked the forums. It's the *basics* that are crazy hard or
just don't work. I'm an Adobe fan, but this is nuts. Am I alone on
this?

Select the trigger image in Design view, and double click the
SwapImage
behavior listed in the behaviors panel.
> But our IT guy,
> myself, and the other guy can't get images to show
correctly, can't figure
> out
> how to edit the rollover, can't get frames to work
right.
This is not a DW problem, though. It's a *you* problem, no?
> Am I alone on this?
Among those who have taken the time to learn HTML and CSS,
yes, I think so.
Anyone using DW primarily in "WYSIWYG" mode will experience
many
frustrations, include ones such as this.
And by the way, why on earth are you using frames? 8)
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
==================
"PEGShane" <[email protected]> wrote in
message
news:g131mb$2p9$[email protected]..
> This is driving me nuts. I've got an Image Rollover and
I just want to
> edit it.
> The second state isn't on the Properties menu. Is there
no way to get back
> to
> the initial dialogue that asks you to link the two
images?
>
> And I truly don't want to be a troll or sound overly
negative, but me and
> two
> friends--both of whom have hosted multiple websites for
years--are
> completely
> stumped by a myriad of things in Dreamweaver CS3. I used
two versions back
> (before MX, I think) just fine and had no real
complaints. But our IT guy,
> myself, and the other guy can't get images to show
correctly, can't figure
> out
> how to edit the rollover, can't get frames to work
right. It's very
> frustrating. I've bought the Dummies book, watched the
tutorials, and
> checked
> the forums. It's the *basics* that are crazy hard or
just don't work. I'm
> an
> Adobe fan, but this is nuts. Am I alone on this?
>

JavaScript Image Rollover with html:image ?

I've got a website I'm developing in which I have a submit button as well as a button which pops up a google map within my web page. I've currently got the buttons working and doing what they are supposed to do, but I'm having trouble with a rollover image effect.
The method I'm currently using looks something like...
For my page with the submit button:
<html:image src="images/spacer.gif" styleId="sButton">
</html:image>
For my page with the button that pops up a google map:
<html:image src="images/spacer.gif" styleId="mButton" onclick="javascript:blahblahblah">
</html:image>That's what I'm using to display the buttons on both pages and the functionality works. Next up is the basic CSS I'm using for the image rollover effect...
For the submit button...
#sButton {
display:block;
width:100px;
height:100px;
background-image:url(submitImage.jpg);
background-repeat:no-repeat;
#sButton:hover, #sButton:active {
background-image:url(submitImageHover.jpg);
background-repeat:no-repeat;
For the map button...
#mButton {
display:block;
width:100px;
height:100px;
background-image:url(mapImage.jpg);
background-repeat:no-repeat;
#mButton:hover, #mButton:active {
background-image:url(mapImageHover.jpg);
background-repeat:no-repeat;
}And that's basically it. So as you can see, I'm using the <html:image> to give myself a submit button type thing which works perfectly in both cases. To try and make it have a rollover image effect I'm setting a styleId and then in my CSS declaring a default image and then a hover/active image. Back in the <html:image> tag, for the required src attribute, I've just got a spacer.gif which is a 1 x 1 image that is 100% transparent.
The effect, at least in the Gecko based browsers I've tried, such as Firefox, is that you don't see the spacer.gif even though it is there, and all you see are the CSS background images which changes on hover. This even works in IE7.
My problem... Internet Explorer browsers prior to 7 aren't doing the image rollover. The buttons still work, but I can't get the image to change just using the CSS... Any tips on a way to still use this method or to still use <html:image> but to use some sort of javascript solution?

Thanks for all the quick help on this one... I got it to work just like I was hoping.
bodhi-firestarr... You got me thinking and so I went and tried to search for a way to use that particular javascript method with the <html:image> tag. This brought me to the solution that I could use styleId just like an id and then getElementById in the javascript.
Unfortunately, this only partially solved my problem... It made the submit button work through both CSS and JavaScript, but my map it button still wasn't working. My map button is inside of a loop generating a button for a set of results. If I used the getElementById method it would use the same id for each one causing problems. When I tried to add some sort of index to the end of the Id to fix this, it messed up my CSS, but that's when...
gmachamer, you came up with just the solution I needed. I had no idea property actually translated to name. Once I knew this I was able to use property and got everything to work.
Thanks again everyone!

Image Rollover issues with IE

I am working with CS4 and trying to do a simple image rollover exercise for a class I am taking, I have selected the initial image and the replacement image and a link. When I go to view the image rollover does not work but the link does. I veiwed in Firefox and Opera and the rollover works as expected.
Any Ideas?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">

</script>
</head>
<body onload="MM_preloadImages('images/triangle.gif')">
<p><a href="http://www.trilateral.org" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('trilateral','','images/triangle.gif',1)"><img src="images/square.gif" name="trilateral" width="84" height="83" border="0" id="trilateral" /></a></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>
Here is the code, it works in Opera and Firefox but the mouseover changing to the square to a triangle does not work in IE but the link works.
Appreciate any insight you can provide.
Ron

LinkToURL with image rollover

Hi
I need to create an LinkToUrl object with image rollover.
It's possible? If isn't possible there is another way to have a similar effect?
Thanks to all
Andrea

Hi,
Access the below link which shows you the entire attribute of LinkToUrl functionality.
http://help.sap.com/saphelp_nw04/helpdata/en/c5/dc99f5d1b1504aa0045a7070a0f500/frameset.htm
Hope it helps.
Regards,
Guru.
P.S :- Close the thread if your problem is solved and consider to reward points.

Flash Photo Gallery Image Rollover Help

Ok I was wondering if anyone could help me with this I have
created a flash photo gallery which reads from an xml file. It uses
the following action script
myPhoto = new XML();
myPhoto.ignoreWhite = true;
myPhoto.onLoad = function(success) {
//portfolioTag = this.firstChild;
numimages = this.firstChild.childNodes.length;
spacing = 70;
for (i=0; i<numimages; i++) {
this.picHolder = this.firstChild.childNodes
this.thumbHolder =
thumbnails.createEmptyMovieClip("thumbnail"+i, i);
this.thumbHolder._x = i*spacing;
this.thumbLoader =
this.thumbHolder.createEmptyMovieClip("thumbnail_image", 0);
this.thumbLoader.loadMovie(this.picHolder.attributes.thmb);
this.thumbHolder.title = this.picHolder.attributes.title;
this.thumbHolder.main = this.picHolder.attributes.main;
this.thumbHolder.onRelease = function() {
loader.loadMovie(this.main);
title_txt.text = this.title;
myPhoto.load("xmlphoto.xml");
I want to add in a rollover effect to the gallery similar to
the one in Flash Gallery 1 in photoshop
http://www.adobe.com/support/downloads/detail.jsp?ftpID=2961
Would it be possible to take one of the as files from the Flash
Gallery source and intergrate it into my gallery or would I be
better just adding the rollover effect myself?

the thumbnail (or its unique parent if you setup this up
without fore-thought) should be a movieclip that stores a reference
to the larger image's path.
search google for flash gallery tutorial. there are bound to
be lots of tutorials.

Creating an image rollover when text is rollover

Hi all,
I'm trying to create the following:
I want certain words in the text to trigger an image when
rolled over.
Will Captivate 3 allow this? I've done every type of rollover
box etc.to get the image to appear when the text is rolloever over.
Any suggestions if this is even possible?
Thanks

Hi again
There is a zoom feature of Captivate. You click Insert >
Zoom area. You then end up with two different areas on your slide.
One is where you place focus. The other will contain what you want
to zoom in on. The difference between the two in size determines
how much magnification occurs. For example, if you have a really
small zoom area and a really large zoom destination area, you are
magnifying a great deal.
You will probably find the results a bit less than
satisfactory, as the zoom destination will not present the cleanest
image. It will grow quite fuzzy and sort of pixellated. Because of
this, you may wish to create your own "zoomed up" image and use it
inside the Zoom Destination area. When you double-click the area,
you should see a button that allows choosing the image to be
"zoomed".
Sincerely... Rick

Invisible submit button with image rollover

I have a need to combine a rollover image with a form submit
button. I need the submit button to not be visible except for those
that know where to look.
I have a database query that displays rows of data. Each row
has a checkbox to select that item, so the data table is in a form;
the checkbox is a cfinput. In order to pass the parameters of the
checked items, a submit button must be used to submit the form
values.
My need is for the submit button to be the rollover image.
Only users that know where to find the rollover image will be able
to submit the list of checked form values. "Regular" users
shouldn't be in that area of the screen.
So, a combined rollover image submit button is needed.
Ideas? Thanks...Rick...

document.yourformname.submit didn't work.
But then discovered that the href value needs to be empty (or
"#") to work. This code works: (rollover images with the submit()
code):
<a href="#"
onClick="javascript:submit()"
onmouseover="MM_swapImage('Image9','','images/change-meeting-date.png',1)"
onmouseout="MM_swapImgRestore()">
<img src="images/blank-hidden-area.png"
name="Image9"
width="111"
height="11"
border="0"
id="Image9" />
</a>
When, in DW, you add the rollover image, you need to leave
the href value empty. I suppose that lets the submit button use the
<cfform action...> value as the results page, letting the
form values pass to the results page.
Now, the next step is to have two different rollover images
with submits() that point to two different result pages, while
still using one cfform. (Two submits in one form, each submit
pointing to a different results page.)
...Rick...

Missing background colour in image rollover in IE

Just noticed I have a missing image background colour on a
rollover link - it's fine in firefox and safari, but awol in IE(6).
link
here
The CSS looks like :
a:link img {
padding: 5px;
border: 1px solid #999999;
a:visited img {
padding: 5px;
border: 1px solid #999999;
a:active img {
padding: 5px;
border: 1px solid #999999;
a:hover img {
padding: 5px;
border: 1px solid #8C595A;
background-color:#CD8B8D;
Any ideas?

Hi Everyone,
Great thread. I thought you guys might find this interesting.
There is an IE Img Hover Bug that most people run into with
border color change on hover that answers some of the questions
here.
Lain71, at the end I included code you can use with a thick
border that should do what you want and will work cross-browser.
I thought it might be beneficial to anyone else searching the
forum for IE img hover issues to offer some additional detail.
Most people first run into trouble when they have an image
link and try to handle border color change like you would on a text
link. Unfortunately, this is incorrect CSS for doing this but it
works in IE6 :-/ It doesn't .. as it shouldn't ..work in the Gecko
browsers.
a.blah{
border: 3px;
border-color: #CC0099;
border-style:solid;
a.blah:hover{
border-color: #33FFFF;
<a href="#" class="blah"><img src="mypic.gif"
width="100" height="100"
border="0" /></a>
In IE6, the border changes color on hover. Also, note that IE
is actually rendering the code incorrectly by stretching the border
around the image inside the link element. So it achieves the
desired effect....until...
Testing the page in FF or NN is where the trouble starts, as
you notice the border no longer surrounds the image.
FF and NN render that code correctly by applying the border
to the link element only.
By doing so, the height of the border is equal to text line
height ..as Joe mentioned..which is usually not the height of the
image.
This same effect happens with background color and background
images when applied to a:hover.
So, now to make it work in FF and NN you use the correct CSS
to apply the border to the image inside the link, similar to
Lain71's code:
a.blah img{
border: 3px;
border-color: #CC0099;
border-style:solid;
a.blah:hover img{
border-color: #33FFFF;
<a href="#" class="blah">test<img src="mypic.gif"
width="100" height="100"
border="0" /></a>
Now it works in FF and NN beautifully, but...
Now it doesn't work in IE ! There's no hover effect.The
border doesn't change color.
And there's the "bug."
*********The bug:
In IE, you cannot apply a hover rule to an image link without
first
declaring a hover rule for that link. (Go figure!!!!!!).
This works nicely, I've found.
a.blah img{
border: 3px;
border-color: #CC0099;
border-style:solid;
a.blah:hover{
background-color:transparent;}
a.blah:hover img{
border-color: #33FFFF;
<a href="#" class="blah">test<img src="mypic.gif"
width="100" height="100"
border="0" /></a>
Now it works in IE, NN and FF.
So,
a.blah:hover {background-color:transparent;}
takes care of IE's need to apply a hover rule to the link
before applying a hover rule to the image link without changing the
look of things..
Take care,
Tim

Image rollover

the best way to describe my problem is to ask you to visit a
site I created in GoLive. davidandjeanphotos.com. click on the
composites button at the top. two things. I am trying to recreate
the effect in DW and looking for a way to do this. and the main
problem with the script that is loaded is that if you need or want
to change an image, you have to delete and reinstall all the images
all over again. my best guess right now is to use disjointed
rollovers with a blank gif where the larger images go. also to
uncheck restore original image which would be the blank gif. am i
thinking in the right direction? any ideas would be
appreciated.

If you are referring to the image thumbnails that you
rollover and reveal a larger image on the page, then I believe you
can just use the show-hide behavior for this.
Here are some links to point you in the right direction:
http://www.projectseven.com/extensions/info/autoshowhide/index.htm
http://livedocs.adobe.com/en_US/Dreamweaver/9.0/help.html?content=WSc78c5058ca073340dcda91 10b1f693f21-7af6.html

Image rollover doesn't seem to work.

Hello thank you for reading this question.
I am Daniël and I'm a beginning Dreamweaver user. I just started creating a site and I would like to get an image to change on mouse-over. This isn't hard at all I know, but for some reason it does not work for me. I select 'Insert > Image Objects > Rollover Image > Select the correct images. Then I save the document to see if it worked, but it just doesn't work. The link is there alright but the mouseover does not seem to work.
If anyone would be able to answer this it would be great!
Thanks,
Daniël.

Tried that multiple times, without any succes.
Okay I just uploaded the website at http://www.itsmisterpaint.com.
Click enter and then you'll see the 'homepage'. The links on the left are supposed to change when hovered over. (Home takes you back to the index page at the moment)
Thanks,
Daniël.

Image rollover in webapps

Similar Messages

Maybe you are looking for