Dreamweaver Created Rollover Images

Can Dreamweaver rollover image buttons validatein an HTML
online Validator? I usually use Dreamweavers rollover image option
to create my menus but the HTML never validates because of it. I've
ran pages through the validator site and its the code that
Dreamweaver put in that always sets it off. Take them out and the
page runs through fine. Is there away to create rollover images
that do validate?
Sorry I do not have a website to use an example just yet but
I can put one up if that helps. I was just wondering if this is a
well know issue with the way Dreamweaver makes its rollover buttons
or if its just me. If it is the way Dreamweaver makes them than I'd
love to know an alternative way to make them and have them
validate.
Thanks for your help!!!

> Can Dreamweaver rollover image buttons validatein an
HTML online
> Validator?
Of course.
Let's see the code from one of your rollovers that doesn't
validate.
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
==================
"c-fqgy" <[email protected]> wrote in
message
news:gcltjf$nc3$[email protected]..
> Can Dreamweaver rollover image buttons validatein an
HTML online
> Validator? I
> usually use Dreamweavers rollover image option to create
my menus but the
> HTML
> never validates because of it. I've ran pages through
the validator site
> and
> its the code that Dreamweaver put in that always sets it
off. Take them
> out and
> the page runs through fine. Is there away to create
rollover images that
> do
> validate?
>
> Sorry I do not have a website to use an example just yet
but I can put one
> up
> if that helps. I was just wondering if this is a well
know issue with the
> way
> Dreamweaver makes its rollover buttons or if its just
me. If it is the way
> Dreamweaver makes them than I'd love to know an
alternative way to make
> them
> and have them validate.
>
> Thanks for your help!!!
>

Similar Messages

Dreamweaver CC - Rollover image to text transition for Fluid page css/html5

Hi All,
I am using Dreamweaver CC, Windows 7, PC.
Goal: To create a selectable text and colour overlay (not a second image with text in the image) that appears over the top of an image on rollover of the container that the image is located in, all inside a fluid page. Also I would like to avoid jquery and javascript if it's possible.
Please see the attached HTML5, CSS and 300x300jpg example of this page which should show what i'm trying to do, as you can see currently the text sits below the image on mouse hover and should be fitting nicely inside the image box. I will replicate this through all the images once I have it working correctly also. Please note the page fluid scaling at different sizes as I need the rollover to work at whatever size the window or device is.
Thank you in advance for any answers, ideas, work arounds etc you may have or if i've missed this specific scenario covered elsewhere?
Here is the HTML (apologies for my messy code):
<!doctype html>




<html class="">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="../boilerplate.css" rel="stylesheet" type="text/css">
<link href="../Website_Testing/style.css" rel="stylesheet" type="text/css">

<script src="../respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<article id="article" class="fluid">
    <div id="Examples" class="fluid">
      <div id="example1" class="fluid">
          <img src="images/300x300.jpg" alt=""/>
          <span class="text">TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT </span>
      </div>
      <div id="example2" class="fluid"><img src="images/300x300.jpg" alt=""/></div>
      <div id="example3" class="fluid"><img src="images/300x300.jpg" alt=""/></div>
      <div id="example4" class="fluid"><img src="images/300x300.jpg" alt=""/></div>
    </div>
</article>
</div>
</body>
</html>
Here is the CSS (apologies for my messy code):
@charset "utf-8";
img, object, embed, video {
    max-width: 100%;
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
    width:100%;
.fluid {
    display: block;
    text-align: center;
    clear: none;
    float: none;
.fluidList {
    list-style:none;
    list-style-image:none;
    margin:0;
    padding:0;
/* Mobile Layout: 480px and below. */
.gridContainer {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    clear: none;
    float: none;
#article {
    min-height: 160px;
    margin-left: 0;
    padding-left: 5%;
    padding-top: 16px;
    padding-bottom: 16px;
    padding-right: 5%;
    background-color: rgba(255,254,191,1.00);
#Examples {
    text-align: center;
    padding-top: 16px;
    padding-bottom: 16px;
    margin-left: auto;
    margin-right: auto;
.zeroMargin_mobile {
margin-left: 0;
.hide_mobile {
display: none;
#Examples #example1 {
    padding-top: 5%;
    padding-bottom: 5%;
    display: block;
    width: auto;
#Examples #example2    {
    padding-top: 5%;
    padding-bottom: 5%;
    display: block;
    width: auto;
#Examples #example3 {
    padding-top: 5%;
    padding-bottom: 5%;
    display: block;
    width: auto;
#Examples #example4 {
    padding-top: 5%;
    padding-bottom: 5%;
    display: block;
    width: auto;
.text {
    position: relative;
    display: none;
    background: #999;
    background: rgba(0,0,0,0.3);
    text-align: center;
    top: 0px;
#example1:hover .text {
    display: block;
    background-color: rgba(12,109,242,1);
#example1 {
    -webkit-transition: all 0.35s ease-in-out 0s;
    -o-transition: all 0.35s ease-in-out 0s;
    transition: all 0.35s ease-in-out 0s;
#example1:hover {
    background-color: rgba(12,242,109,1.00);
#example2 {
    -webkit-transition: all .35s ease-in-out;
    -o-transition: all .35s ease-in-out;
    transition: all .35s ease-in-out;
#example2:hover {
    background-color: rgba(12,242,109,1.00);
#example3 {
    -webkit-transition: all .35s ease-in-out;
    -o-transition: all .35s ease-in-out;
    transition: all .35s ease-in-out;
#example3:hover {
    background-color: rgba(12,242,109,1.00);
#example4 {
    -webkit-transition: all .35s ease-in-out;
    -o-transition: all .35s ease-in-out;
    transition: all .35s ease-in-out;
#example4:hover {
    background-color: rgba(12,242,109,1.00);
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
    width: 100%;
    margin-left: auto;
    min-height: 100%;
#Examples {
    text-align: center;
    min-height: 640px;
.hide_tablet {
display: none;
.zeroMargin_tablet {
margin-left: 0;
#Examples #example1 {
    float: left;
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 2%;
    padding-bottom: 2%;
    width: 46%;
#Examples #example2 {
    float: left;
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 2%;
    padding-bottom: 2%;
    width: 46%;
#Examples #example3 {
    float: left;
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 2%;
    padding-bottom: 2%;
    width: 46%;
#Examples #example4 {
    float: left;
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 2%;
    padding-bottom: 2%;
    width: 46%;
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
#article {
    margin-left: 0;
#Examples {
    text-align: center;
.zeroMargin_desktop {
margin-left: 0;
.hide_desktop {
display: none;
@media only screen and (min-width:1024px){
#article #Examples #example1 {
    width: 23%;
    padding-left: 1%;
    padding-right: 1%;
    padding-top: 16px;
    padding-bottom: 16px;
#article #Examples #example2 {
    width: 23%;
    padding-left: 1%;
    padding-right: 1%;
    padding-top: 16px;
    padding-bottom: 16px;
#article #Examples #example3 {
    width: 23%;
    padding-left: 1%;
    padding-right: 1%;
    padding-top: 16px;
    padding-bottom: 16px;
#article #Examples #example4 {
    width: 23%;
    padding-left: 1%;
    padding-right: 1%;
    padding-top: 16px;
    padding-bottom: 16px;
#Examples {
    min-height: 340px;
And here is a 300x300 grey image i'm using as an example holder:
Thanks for taking the time all,
Jeff

Try this in a new, blank document:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 with Pure CSS Rollovers</title>
<style>
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
body {
font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
font-size:100%;
#rollover a {
display: inline-block;
position: relative;
margin-right: 2%;
text-decoration: none;
color: #FFF;
#rollover a span {
display: block;
visibility: hidden;
background-color: #3CC;
position: absolute;
z-index: 100;
left: 0;
top: 0;
font-size: 13px;
font-weight:bold;
line-height: 1.2;
color: #FFF;
text-align: center;
border: 5px solid orange;
padding: 5px;
width: 200px;
min-height: 125px;
#rollover a:hover span,
#rollover a:active span,
#rollover a:focus span { visibility: visible; }
#rollover a:hover,
#rollover a:focus { visibility: visible; }
</style>
</head>
<body>
<div id="rollover">
<p>
<a href="#"><img alt="description" src="http://placehold.it/200x125">
<span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris vitae libero lacus, vel hendrerit nisi!
Maecenas quis velit nisl, volutpat viverra felis. </span></a>
<a href="#"><img alt="description" src="http://placehold.it/200x125">
<span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris vitae libero lacus, vel hendrerit nisi!
Maecenas quis velit nisl, volutpat viverra felis. </span></a>
<a href="#"><img alt="description" src="http://placehold.it/200x125">
<span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris vitae libero lacus, vel hendrerit nisi!
Maecenas quis velit nisl, volutpat viverra felis. </span></a>
<a href="#"><img alt="description" src="http://placehold.it/200x125">
<span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris vitae libero lacus, vel hendrerit nisi!
Maecenas quis velit nisl, volutpat viverra felis. </span></a>
</p>
</div>
</body>
</html>
Nancy O.

Rollover images in Dreamweaver CS6 show blue frame in Internet Explorer...

Hi
I've created some very simple rollover buttons in Photoshop and placed them into Dreamweaver as rollover images to use as a navigation bar.
They appear correct in all browsers except Internet Explorer - they appear with a blue frame around? The table boarder is set to 0...
My Dreamweaver knowledge is very limited so appologies if there is a very simple solution to my problem :-)
Many thanks for any suggestions.
Kim

Thank you for your help - this works :-)
Sorry about my lack of knowledge :-)
Thanks again!

How to create an image button..

Tools: Adobe Photoshop CS5
Level of mastery: very novice
Goal: Creat Button for a website
Environment: Windows Vista
Problem:The following images are buttons has already been designd . One image is in the normal status, while the other button is in the rollver status. I want to create an indetical image with same properties such as (size, font type, font size, font color background color) called "Intuitive Healer". I dont know how to mimic the font and the background colors.
normal status of a button
rollover button
Intuitve Healer ? normal
Intuitive Healer ?Rollover
I am curious to learn how to create a button with exact "look and feel" design and write on it Inutive healer
Make my day

the type looks like Times New Roman Font. If you just follow the tutorial listed below, it lays out nicely. you would just want to omit the gradient and some effects that they do in the tutorial, to match the one you want above. it is going to involve both Dreamweaver and Photoshop.
Creating rollover images:
http://help.adobe.com/en_US/photoshop/cs/using/WS18F9E180-3241-4891-ACC8-82C9DFB254F5a.htm l
watch this video:
http://www.youtube.com/watch?v=_pVfBtW-TUQ
-good luck!
janelle

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?

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.

Trying to create rollover, creates extra image

I sliced up my images in PhotoShop and saved as HTML and images. I've imported them into Dreamweaver, everything looks great. When I go to create a rollover(image object/rollover), it's like I'm adding another image to the layout. What am I doing wrong?

Here's one example of your code:
<td><a href="http://www.brookstropicals.com/tropicalrecipes/papayarecipes" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('crpapayas','','/nutrition/nutritionnews/introduction/images/rollCRpap.jpg',1 )"><img src="/nutrition/nutritionnews/introduction/images/Caribbean-Red-Recipes.jpg" alt="Caribbean Red Papayas Recipes" name="crpapayas" width="344" height="54" border="0" id="crpapayas" /></a></td>
You're going to remove the section in red. Instead, you'll be adding the mouseover code under the <img> tags. Like this:
<img src="/nutrition/nutritionnews/introduction/images/Caribbean-Red-Recipes.jpg" alt="Caribbean Red Papayas Recipes" name="crpapayas"width="344" height="54" border="0" id="crpapayas" onmouseover="this.src='ADDRESS OF YOUR MOUSEOVER IMAGE'" onmouseout="this.src='nutrition/nutritionnews/introduction/images/Caribbean-Red-Recipes.jpg'" /></a></td>
Find similar sections of code and do the same thing, with the appropriate image addresses inserted and you should be golden.

Rollover image works on dreamweaver/preview but not on website

Hey everybody so I'm working on a site for my new clothing line and I am frustrated out of my mind right now because everything seemed to work fine until I published the site my biggest problem right now is that the rollover images I'm using do not show on the actual site but they work perfectly on dreamweaver and the browser preview PLEASE I NEED HELP
here's the CSS/HTML (Below)
<!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>Store</title>
<style type="text/css">
#main .container #content p {
    body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px; }
body { font-family: Arial, Helvetica, sans-serif; }
    .container {
        width: 1000px;
        margin: 0 auto;
       body {
        font-family: Arial, Helvetica, sans-serif;
        background: #e4e2e2;
.Header {
    background-image: url(images/Doozie-Jank-Website_03.jpg);
    background-repeat: repeat-x;
               #logo {
        background: url(images//images/webheader_08.png) no-repeat;
        height:300px;
        width: 900px;
           #logo h1 {
        text-indent: -9999px;
        padding-top: 40px;
        ul#menu {
        list-style: none;
    ul#menu li a {
        font-size: 35px;
        color: #c7c7c7;
        text-decoration: none;
    ul#menu {
        list-style: none;
        padding-top: 185px;
    ul#menu li {
        float: left;
        padding-left: 60px;
        ul#menu li {
        float: left;
        padding-left: 10px;
        padding-right: 50px;
    #view-cart{
        position:absolute;
right:650px;
top:305px;
#rollover{
    margin:100px 20px;
    height: 400px;
    width: 400px;
    text-indent: 10000px;
    overflow: hidden;
    background: url(Images/deer-in-headlights-store.gif) top left no-repeat;
    display: block;
#rollover:hover{
    background-position: bottom left;
    float:left;
width:110px;
height:0px;
margin:5px;
    #sidebar {
    float: right;
           #sidebar {
        float: right;
        margin-left: 100px;
        margin-top: -62px;
       #footer {
        background: url(images/footer.jpg) repeat-x;
        padding-top: 20px;
        padding-bottom:60px;
        margin-top: 40px;
          color: #fff;
    #footer p {
        padding-top: 20px;
        padding-bottom:60px;
        margin-top: -25px;
        margin-bottom: -25px;
          color: #fff;
      </style>
<body class="Header">
        <div id="main">
        <div class="container">
             <div id="header">
             <div id="logo">
    <h1>Doozie Jank</h1>
             <ul id="menu">
        <li><a href="index.html">Blog</a></li>
        <li><a href="Store.html">Store</a></li>
        <li><a href="About.html">About</a></li>
        <li><a href="Contact.html">Contact</a></li>
         <li><a href="#">Cart</a></li>
</form>
    </ul>
             </div>
             </div>
              <div id="view-cart">
              <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="8JUVRPJ32YCFC">
<input type="hidden" name="display" value="1">
<input type="image" src="images/images/button-view-cart_23.png" width="174" height="47" >
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
              </div>
<div id="sidebar">
    <ul>
                     <a href="http://www.facebook.com/home.php#!/pages/Doozie-Jank/137039669686754"><img src="images/Facebook1.png" alt="" width="52" height="54" /></a>
                     <a href="http://twitter.com/DoozieJank"><img src="images/Twitter1.png" alt="" width="52" height="54" /></a>
                    </ul>
     </div>
<div id="rollover">
   <a href="#"></a>
</div>
<div id="Buy">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<table>
<tr><td><input type="hidden" name="on0" value="Sizes">Sizes</td></tr><tr><td><select name="os0">
    <option value="Mens-S">Mens-S </option>
    <option value="Mens-M">Mens-M </option>
    <option value="Mens-L">Mens-L </option>
    <option value="Mens-XL">Mens-XL </option>
    <option value="Womens-S">Womens-S </option>
    <option value="Womens-M">Womens-M </option>
    <option value="Womens-L">Womens-L </option>
    <option value="Womens-XL">Womens-XL </option>
</select> </td></tr>
</table>
<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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 +9ftudFJDcAOzlVFH86Mhhv-----END PKCS7-----
">
<input type="image"src="images/images/button-view-cart_13.png" width="160" height="43">
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<table>
<tr><td><input type="hidden" name="on0" value="Sizes">Sizes</td></tr><tr><td><select name="os0">
    <option value="Men's-S">Men's-S </option>
    <option value="Men's-M">Men's-M </option>
    <option value="Men's-L">Men's-L </option>
    <option value="Men's-XL">Men's-XL </option>
    <option value="Women's-S">Women's-S </option>
    <option value="Women's-M">Women's-M </option>
    <option value="Women's-L">Women's-L </option>
    <option value="Women's-XL">Women's-XL </option>
</select> </td></tr>
</table>
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<table>
<tr><td><input type="hidden" name="on0" value="Sizes">Sizes</td></tr><tr><td><select name="os0">
    <option value="Mens-S">Mens-S </option>
    <option value="Mens-M">Mens-M </option>
    <option value="Mens-L">Mens-L </option>
    <option value="Mens-XL">Mens-XL </option>
    <option value="Womens-S">Womens-S </option>
    <option value="Womens-M">Womens-M </option>
    <option value="Womens-L">Womens-L </option>
    <option value="Womens-XL">Womens-XL </option>
</select> </td></tr>
</table>
<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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 hzSw3oItgcbXf9EB/o/qXtb-----END PKCS7-----
">
<input type="image" src="images/images/button-view-cart_19.png" width="197" height="44" />
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
   </div>
<div id="footer">
        <div class="container">
          <p>Copyright © 2010 Doozie Jank<br />
            All Rights Reserved</p>
        </div>
    </div>
</head>
<body>
</body>
</html>

Fix your validation errors first -
http://validator.w3.org/unicorn/check?ucn_uri=dooziejank.com%2FDeer%2520in%2520The%2520Hea dlights.html&ucn_lang=en&ucn_task=conformance#
For example, you have no </head> tag....
And it's a very bad idea to use spaces in your filenames for the web
Deer in The Headlights.html

Can you create an image map hotspot for an external URL in Dreamweaver CS6?

Can you create an image map hotspot for an external URL in Dreamweaver CS6?

Duplicate post: http://forums.adobe.com/thread/1338701?tstart=0

Dreamweaver: Rollover images inserted but have stopped working

Hello,
I am new to Dreamweaver and using CS3.
I made the following Page: https://www.lovemondaymedia.com/princes-trust-facebook-page/facebooktab.php and have put rollovers in for the four 'navigation' buttons (Home, Need Help, Support Us, About the Trust).
Yesterday the rollover images were working without issue but today they have stopped functioning and I'm not sure what I've done, or how to fix it! I'm hoping someone can take a look at the code of the page and let me know if they see an error.
Thank you in advance
Marie

For starters, you could change this -
<script type="text/javascript">
FB.init(
appId: FB_APP_ID, '288575697836114',
Status: true,
Cookie: true,
Xfbml: true
function MM_swapImgRestore() { //v3.0
to this -
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
Something about that bit of facebook code looks fishy anyhow. Did you add it?

Imagemap Rollover image - Dreamweaver CS3

Hey, a quick run-down of what im trying to do:
I have a background image of a map. What im wanting to do is when I hover over the word 'Germany' say, i want a new image to appear. Can this be done using Imagemap as apose to 'Rollover Image' or can it only be done in php?
Example if it helps explain better: if i hover over a login button thats actually part of the header image, txt will appear in a predefined place
Thanks
Stephen

Yes, it's possible to do. You would trigger a 'tooltip' with the mouseover event on the hotspot. You can investigate the use of the Spry tooltip that is in DW, or you can investigate the many 3rd party tooltip scripts. My favorite is a commercial one (tooltipmagic), at http://www.projectseven.com.

Rollover images not properly aligning in design view

Hello,
I am a self taught Web design teacher and I have seemed to run into an issue with roll-over images as links. I am teaching my students to use photoshop to create two images for rollover buttons. When the students insert the images, everything works fine except for the alignment on page. One link/button makes a new line on the page and forces everything to the right on screen. But when we preview it in a browser, it looks correct. I also don't know any JAVA coding other than what I should be looking at when we create the rollover links. Do you have any suggestions for me?
      (also if you find anything that is obsolete in my code, please let me know. Again, I am self taught with NO formal education in it)
dreamweaver
browser
if you need the coding of the page, here (edited to save reading time):
#wrapper {
          width: 960px;
          margin-right: auto;
          margin-left: auto;
          background-color: #5B1E1E;
          height: 780px;
          margin-top: 10px;
#wrapper2 {
          background-color: #CCCCCC;
          height: 835px;
          width: 1000px;
          margin-right: auto;
          margin-left: auto;
#wrapper #topnav #topnav1 {
          height: 40px;
          width: 940px;
          background-color: #5B1E1E;
          margin-right: auto;
          margin-left: auto;
          margin-top: 5px;
#wrapper #topnav #topnav1 #home {
          height: 40px;
          width: 152.5px;
          float: left;
#wrapper #topnav #topnav1 #home2 {
          float: left;
          height: 40px;
          width: 152.5px;
          margin-left: 5px;
#wrapper #topnav #topnav1 #home3 {
          float: left;
          height: 40px;
          width: 152.5px;
          margin-left: 5px;
#wrapper #topnav #topnav1 #home4 {
          float: left;
          height: 40px;
          width: 152.5px;
          margin-left: 5px;
#wrapper #topnav #topnav1 #home5 {
          float: left;
          height: 40px;
          width: 152.5px;
          margin-left: 5px;
#wrapper #topnav #topnav1 #home6 {
          float: left;
          height: 40px;
          width: 152.5px;
          margin-left: 5px;
-->
</style>
<script type="text/javascript">

</script>
</head>
<body onload="MM_preloadImages('tools_images/home_over.jpg','tools_images/bhs_over.jpg','tools_ images/mset_over.jpg','tools_images/TR_over.jpg','tools_images/video_over.jpg','tools_imag es/web_over.jpg')">
<div id="wrapper2"><span class="style1">.
</span>
<div id="wrapper">
<div id="banner">
    <div id="banner1"><img src="tools_images/banner.jpg" alt="banner" width="940" height="70" /></div>
</div>
<div id="topnav">
    <div id="topnav1">
      <div id="home"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','tools_images/home_over.jpg',1)"><img src="tools_images/home.jpg" alt="home" name="home" width="152" height="40" border="0" id="home7" /></a></div>
      <div id="home2"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','tools_images/bhs_over.jpg',1)"><img src="tools_images/bhs.jpg" alt="bhs" name="Image3" width="152.5" height="40" border="0" id="Image3" /></a></div>
      <div id="home3"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','tools_images/mset_over.jpg',1)"><img src="tools_images/mset.jpg" alt="mset" name="Image4" width="152" height="40" border="0" id="Image4" /></a></div>
      <div id="home4"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','tools_images/TR_over.jpg',1)"><img src="tools_images/TR.jpg" alt="TR" name="Image5" width="152.5" height="40" border="0" id="Image5" /></a></div>
      <div id="home5"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','tools_images/video_over.jpg',1)"><img src="tools_images/video.jpg" alt="video" name="Image6" width="152.5" height="40" border="0" id="Image6" /></a></div>
      <div id="home6"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','tools_images/web_over.jpg',1)"><img src="tools_images/web.jpg" alt="web" name="Image7" width="152.5" height="40" border="0" id="Image7" /></a></div>
      <div id="blank"></div>
    </div>
</div>
</div>

Thanks Ken!
I know that, and me personally don't care. But its hard to get my students to grasp the concept of what you see is not always what you get.
Thank you for your response

Help Me! My webpage rollover images goes away

Hi all. I'm realy stuck there with my rollover images. I got created my website using dreamweaver CS5 and when I opened it in firefox by myself all was ok, but when my friend opened page all rollover images jump to left side of webpage. So it mean that only i can see all normaly, but all other not.
Please help me. I can't continue my work now.
Note: My monitor wide resolution is 1440, My friend wide monitor resolution is 1920.

Can someone help me to center one short text in my webpage?
I tryed to do what i know but dhis doesnt help me.
Here is my code:
<!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>Home Page</title>
<style type="text/css">
body {
width: 1100px; /**width in pixels**/
margin:0 auto; /**centered**/
/**your page background image goes here**/
background: #000000 url(pictures/HomeBackground.jpg) no-repeat center top;
#Nav {
    width: 665px;
    margin-top: 549px; /**adjust as needed**/
    margin-left: 165px; /**adjust as needed**/
#Nav img {
border:none;
padding-left: 12px; /**space between images**/
#Text {
    width: 320px;
    text-align: center;
    color: #FFF;
    margin-top: 350px;
    margin-right: auto;
    margin-left: auto;
    padding-left: 98px;
#Chat {
    width: 390px;
    margin-top: 21px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    padding-left: 726px;
    margin-bottom: 23px;
#Nav #Text p {
    font-family: AvQest;
    font-style: normal;
    text-transform: none;
    color: #b6a890;
    font-weight: normal;
    font-size: 14px;
#RelatedLinks {
    width: 100px;
    margin-right: auto;
    margin-left: auto;
    padding-left: 100px;
    text-align: right;
#Related_Links p #main #search strong {
    color: #b6a890;
    text-align: center;
#Related_Links p strong {
    color: #b6a890;
#apDiv1 {
    position:absolute;
    left:41px;
    top:1731px;
    width:88px;
    height:38px;
    z-index:1;
</style>
</head>
<body>
<div id="apDiv1"><tr>
      <td width="160" bgcolor="#996633"><iframe src="http://www.freshfmonline.com/player.html" height="0" width="0" frameborder="0" id="page" scrolling="no" ></iframe></td>
    </tr></div>
<h1></h1>
<div id="Nav"> <img src="pictures/buttons/homeRed.PNG" width="55" height="18" /> <img src="pictures/buttons/GuidesButton.PNG" width="70" height="18" /> <img src="pictures/buttons/FilesRed.PNG" width="48" height="21" /> <img src="pictures/buttons/RunewordsRed.PNG" width="115" height="18" /> <img src="pictures/buttons/RecipesRed.PNG" width="70" height="18" /> <img src="pictures/buttons/EventsRed.PNG" width="70" height="18" /> <img src="pictures/buttons/ShopButton.PNG" width="55" height="18" />

<div id="Text">
    <p>Median XL is the most popular mod, or unofficial modification, for Diablo II Lord of Destruction.
      It modifies the game by replacing character skills, improving items and monsters, and adding new uberquests.</p>
    <p>Features</p>
    <p>o New skill trees with 30 brand new skills per class.<br />
      Bored with Blessed Hammer? Median XL offers brand new skill trees. Each class has 25 main skills, 3 uberskills and 2 challenge reward skills. If you ever wanted a crossbow necromancer or summoner amazon, here is your chance!</p>
    <p>o 30 new uberquests for high level characters.<br />
      Forget Battle.net and 'Uber Tristram', Median XL has 22 more uberbosses and 8 special uberlevels for high level characters. Defeating them on the highest difficulty yields powerful unique charms.</p>
    <p>o Special challenges for expert players.<br />
      Beating the game is only half the fun! Reach certain milestones in the game to obtain a special reward.</p>
</div>
<div id="Chat">
    <iframe title="bugis083" src="http://www1.shoutmix.com/?bugis083" width="234" height="382" frameborder="0" scrolling="auto"> <a href="http://www1.shoutmix.com/?bugis083">View shoutbox</a> </iframe>
</div>
</div>
<div id="Related_Links">
<p><span id="main"><span id="search"><strong> ©</strong></span></span><strong>2010 Diablo II MedianLT Serveris</strong></p>
</div>
</body>
</html>
I need that text in bold shrift will be centered in that position which is written in CSS.
Thanks

Visited state on rollover image?

Hi,
I am using a rollover image as a link and was wondering if it
was possible to create a visited state for a rollover image so that
when the user has clicked on it then later returns back the the
page the image has changed colour to indicate the link has been
visited? If not achivable in dreamweaver would it be achivable in
Flash? Or is it something that would require Java scripting?
Thanks
Beth H

"befh" <[email protected]> wrote in message
news:emn07c$q3v$[email protected]..
> Hi,
>
> thanks for your suggestion, however I don't think that
would work with
> what
> I'm wanting to do?
>
> I have just discovered that you can specify the
background image of links
> in
> css like this:
>
> a.ipod1:link {background-image: url(s1box.jpg);
> background-repeat:no-repeat}
> a.ipod1:hover { background-image: url(enter.jpg);
> background-repeat:no-repeat}
> a.ipod1:visited {background-image: url(beenthere.jpg);
> background-repeat:no-repeat}
>
> however I am unsure of how to apply this into the code
so that it is on
> the
> background of a table cell? I figured if I applied this
then I could just
> put a
> transparent gif over the top of the background image
which would act as a
> link?
>
> I fear that I may be running around in circles here?
What you discovered is basically the same technique I'm
pointing you to in
the tutorial I gave you the URL to (in my earlier post). Give
it a try!
Patty Ayers | www.WebDevBiz.com
Free Articles on the Business of Web Development
Web Design Contract, Estimate Request Form, Estimate
Worksheet

Can't see rollover images - help!

Hello---
I'm creating a website for a business, and when I add
rollover images exactly the way they show in the tutorial, I'm not
seeing the rollover image in the browser preview. Why would this be
happening?

> I'm not seeing the rollover image in the
> browser preview. Why would this be happening?
as a guess- you computer doesn't execute javascript for local
pages.
http://projectseven.com/support/answers.asp?id=153
Alan
Adobe Community Expert, dreamweaver
http://www.adobe.com/communities/experts/

Dreamweaver Created Rollover Images

Similar Messages

Maybe you are looking for