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.

Similar Messages

How do I drag an image or text box to the "workspace" off of my working file but where I can still see the image and text box for future use?

How do I drag an image or text box to the "workspace" off of my working file but where I can still see the image and text box for future use?
When I drag the item off of the trifold that I am creating, it just disappears but I still want to use it. I just need to move it out of the way to modify other portions of the document.
thanks,
C

Add another page below the current one to use as a storage area. You can't use the grey area around the page for storing items you want to use later.
Go to the Pages Menu>Provide Pages Feedback if you would like to request this feature be added in future versions.

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!!!
>

Adding New Image and Text to an Existing Page Created with Tables

Working in DW 5.5
I'm trying to add a new image/link and small amount of text to an existing web page that was created with tables and centered. I am using AP Divs. One for the image and one for the text. Everything functions fine, but I can't get the new items to anchor and re-center with the rest of the page. I am not able to overide the "Absolute Positioning". I've tried different solutions from various tutorials but I can't seem to make them work with tables.
The added items are a Facebook button and text.
Go to: http://www.sugarhollowfarms.net/index.html to see the problem.
Please help. I'm not that experienced.

Make a back-up of the page first before you implement the changes below!
Take the below bit of code from <div id="FBlogo">...... to.......... </div> 
and insert it directly after the opening div tag FWTableContainer and before your opening table tag (see position below):
<div id="FWTableContainer209091602">
<div id="FBlogo"><a href="#"><img src="images/fb.png" alt="fb" width="62" height="62" onClick="MM_openBrWindow('http://www.facebook.com/SugarHollowFarms','facebook','toolbar=yes,location=yes,status=yes, menubar=yes,scrollbars=yes,resizable=yes,width=1000,height=800')"></a>
<p class="bodytext"><strong>Join us<br>
on Facebook</strong></p></div>
<table border="0" cellpadding="0" cellspacing="0" width="800">
Then add - position: relative; - to the FWTableContainer css (as shown below):
#FWTableContainer209091602 {
    /* The master div to make sure that our popup menus get aligned correctly. Be careful when playing with this one. */
    position:relative;
    margin:auto;
    width:800px;
    height:600px;
    text-align:left;
    top: 20px;
    background-image: url(images/homepage_new3.jpg);
    border: medium solid #336600;
    position: relative;
Amend the css for FBlogo to as below:
#FBlogo {
    position:absolute;
    left:700px;
    top:380px;
    width:91px;
    z-index:1;
    text-align: center;
Amend the css for bodytext as below:
.bodytext {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    line-height: 13px;
    margin: 0;
    padding: 0;

Making images and text scalable in fluid grid

So I'm creating my first Fluid Grid design and I'm having issues with making images scalable and look appropriate. Take a look at this example and the four social media icons on the top right. They're in one div id called sociaLinks. I have in my style_fg.css that the img attribute is set to 3em but that doesn't make the image scale as you resize the browser. I tried doing something like 25% (actually, a little less and I used that figure since there's four images in the div) and that worked in Firefox but in Chrome and Safari, it just appeared as what might as well have been a dot. So how can I make it where the multiple images can scale with the browser?
Likewise, I have a similar issue with making text do the same thing. In this case, my #access div which I'd like the font to resize with the browser. Any ideas on making that work?

You can make images scaleable using CSS3 like this:
div
background-image:url('mypicture.png');
background-repeat:no-repeat;
background-size:cover;
You can also use vendor specific code to make this code compliant in browsers that don't have css3 yet:
/* Safari,Chrome */
-webkit-background-size: cover;
/* Seamonkey */
-moz-background-size: cover;
/* Opera */
-o-background-size: cover;
Hope this helps.

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!

Help needed; underscore in rollover image name will not validate at WC3

GoLive CS on an Intel PC
UTF8 encoded, HTML 4.01 Transitional
I have several rollovers in a page created by using the GoLive palletes, and because GoLive automatically adds an underscore to an image name in a nested folder the page cannot validate at the WC3 site. What do I need to do so that the underscore will not be added automatically? I've tried adding a name/ID to the image before creating the rollover, but it disregards the name and uses what it thinks is best, adding the underscore.
The page is located here:
http://www.redshift.com/~lorac/sdy-55.html
I have attached three images that show the file names used and the results in the GoLive pallete. The first is a screenshot of the folder structure, the second is the placed image pallete and the third is the rollover pallete view.GoLive is set to strip all the GoLive code from the page before uploading, so the web version will not have any GL code.
A sample WC3 comment is:
Line 86, Column 226: value of attribute "ID" invalid: "_" cannot start a name
…pg');return true" href="#"><img id="_5502" class="img_border" src="images/jhj
✉
It is possible that you violated the naming convention for this attribute. For example, id and name attributes must begin with a letter, not a digit.
Do I need to unnest any folders with potential rollover images? That would be a real pain... considering the amount sections and images used in the site.
Thank you in advance for any help you can give.
Carol

I did as you suggested and added to the beginning of the default underscored name in the "name/ID" section and it was accepted. I changed all the rollover image names and uploaded the modified page, and was then able to validate at the WC3 validation site.
Thank you so much! It was an easy fix... a solution I had overlooked. Oddly enough this never occurs with a remote rollover, but that is probably because GL lets you name the base image without suggesting a name first.
Carol

Rollover images not working

I've looked through the different rollover discussion in the forum, but nothing I've found has been able to help me so far.
I'm trying to set up a very simple menubar for my website, and have gotten the look about how I want it, but the rollover images do not display .
The page i've been testing is here: http://www.michaelwebbdesign.com/index2.html
Thank you for any help you can offer.

Have a look at the following
<li><a href="home.html"><img src="images/nav/nav1off.jpg" name="logo" border="0" onmouseover="" onMouseOut="about.src='images/nav/nav1off.jpg'"/></a></li>
What the above tells the browser is
link an image named logo
onmouseover (note the absence of an upper case M and O) do nothing
onMouseOut show the image named about
The above should read
<li><a href="home.html"><img src="images/nav/nav1off.jpg" name="logo" border="0" onMouseOver="logo.src='images/nav/nav/nav1on.jpg'" onMouseOut="logo.src='images/nav/nav1off.jpg'"/></a></li>
Now we get
link an image named logo
onMouseOver replace the logo image with nav1on.jpg
onMouseOut replace the logo imgae with nav1off.jpg
Please keep in mind that the image name must be unique (appear once per document) and that it is better to have an HTML link with a dash/hyphen instead of a space or a period as in nav4_5.jpg.
Gramps

How to use a backgound image for a page?

Hi all,
How can I tell Apex to use an image as the background for a page? This particular page needs to be more visually interesting due to the audience that will be viewing it.
Thanks,
Kim
P.S. I'm using Apex 4.2.2 and Oracle 11g.

Use css to set the background of your page body - http://www.w3schools.com/cssref/pr_background-image.asp
To know where to set this in APEX, see 8.2 Altering Page Attributes and scroll to CSS section

Where can I get/buy more text bullets for pages?

The text bullets for iWork Pages are nice, but I would like many more choices.
Where can I get/buy more text bullets?
I have done some searching on the web and I am finding it very difficult to find any graphics stores for text bullets.
I would really appreciate if someone has some suggestions.

Any character from any font can be used as a text bullet. I suggest that you look at the "special" characters you already have available in many of the fonts that came with your computer. The Character Viewer applet is very useful for this.

Create an image and text rollover in Dreamweaver?

I'm wanting an image and text to have a link and then the image and text to change to another image and text automaticly. Here is a link that I want it to look like. (local hot spots) Is there a way in Dreamweaver to do it or by inserting HTML code...
http://thegospot.com/
Thanks to any help I can get.

All depends on what you want.
CSS a:hover affects the text/image mouseover state.
http://alt-web.com/DEMOS/CSS-Button-Sprite.shtml
Disjointed content inside <span> tags displays wherever you code it to appear on hover.
http://alt-web.com/DEMOS/CSS-Disjointed-Text-Rollover.shtml
Nancy O.

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

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?

Fade in Fade out not working on Rollover Image for Captivate 6

Hi
I am totally baffled with this issue. When I use Fade in 0.5 sec and Fade Out 0.5 seconds on a rollover image, it will not work. I even changed the default on my preferences for rollover images and it still will not work and does not show in my accordian panel in properties.
If I use Captivate 5, I do not have any problem. Any suggestions?
Thanks
Jeff

Are you forgetting that a rollover object has two parts? It has a hit area and the object that appears when you mouse over the hit area. Each part can have different settings in the Properties tab. In a rollover caption, the object that appears is a text caption. In a rollover image, the object is an image.
If you select the rollover object on the timeline, the Properties you see for it in the Properties tab are for the hit area. So having fade in or fade out set there will not affect the object that appears on mouseover.
If you select the caption or image on the stage in Edit mode, the properties shown in the Properties tab are for that specific object and can be different from the hit area of the same rollover object.
In your case, make sure that your image is set to have fade in or fade out. Fading on a hit area of a rollover object is not really useful at all.

Dreamweaver CS4 start a FLV video clip by clicking an image or text

Hi
I have 4 small FLV video clips on my page and I would like to start (and possibly stop) these clips by clicking on an embedded image or piece of text on the same page rather than by clicking the video clip itself.
Can anyone suggest a piece of JavaScript or a DW Behaviour that would do the trick.
I am using Dreamweaver CS4 for Windows 7.
Any help much much appreciated.
Regards
George

HI PZ
Thanks for getting back to me. Although I must admit this is very disappointing. Surely there must some Javascript that would launch the FLV video clips that could be copied and pasted into DW - I've seen similar features in many websites whereby clicking a thumbnail image launches a video clip.
Any one else any thoughts.
Thanks
George

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

Similar Messages

Maybe you are looking for