Using text to swap an image (disjointed rollover)

Hi,
I have some text on my page which is also a link.
It has a background colour, which changes when my mouse hovers over it.
I also want one image on the page to swap with another image when my mouse hovers over the text.
Please can someone direct me to a website which discusses how to create a disjointed rollover using TEXT rather than an image.
Thank you in advance

Stuart Smitheringale wrote: You can see the effect that I have created at this site http://www.drivertrainingcompany.com
Ideally, I would like to use CSS to create the same effect, without relying on swapping images.
As there are often many ways to produce the same effect or behavior, each with its own advantages and disadvantages, having been able to produce the effect or behavior is often more important.
Except for one matter in your page's behavior that you will probably want to change your page appears fine in the most recent versions of Safari, Firefox, and Opera. The bigger problem at this point is that you need to clean up your HTML -- something to which Murray has already alluded.
LESS THAN PERFECT BEHAVIOR
When your mouse leaves one menu item to enter into the next, the words below your menu item change as you would probably like, but the previously highlighted menu item remains highlighted. There is not a clean transition between menu items. This problem can probably be fixed with an onmouseout event.
CLEAN UP TIME
Please refer to the validation link that I have provided below. It will show you that there are structural problems in your page that can affect both the operation and appearance of your page as it is viewed in different browsers and in different versions of the same browser over time. I have only checked three of the more popular browsers for you.
SUGGESTION
Clean up your structural problems first and see if the imperfect behavior described above does not disappear. If it does not, then return with a new question, and someone will provide a fix, if you are yourself unable.
VALIDATION LINK: http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.drivertrainingcompany.com%2F
Roddy

Similar Messages

Using hotspots to swap an image

I'm using DW CS3 and I have a page that has several employee photos on it. I would like for people to be able to roll over a photo and the area to the right of the photos display a bio of that person. Then on roll out, have it restore back to the original photo. Is there a way to create a hotspot on each photo to do this? Or is there a way to make an image cause a different image on the page to swap when it's rolled over?
Thanks.

Sorry, I was trying to make my question more simple, so I neglected to describe exactly what I was trying to do. I wanted the text block to swap depending on which employee photo the user rolled their mouse over, but the photos themselves were actually part of a larger image that I didn't want to also be a trigger.
To be more exact, two of the photos are actually part of one image and the other two are part of another image, so the hotspots make it so that it works only when the user hovers over a specific employee photo.
Sorry for the confusion, but thanks again for the help.

Problem using text boxes as the "image" to drag and drop over audio file

I have been adding audio files to my page in iWeb (previous version, not '08), but I am having a problem giving them titles.
When you first drag a file from iTunes into iWeb, it provides a space for you to drag and drop a picture. The online iWeb guide also says that you can drag a text box there instead of a picture.
I created a text box with the text I would like to drop over the controller. However, it is no longer allowing me to drop the text box there. I used to be able to do this, and I don't know what I'm doing differently now. Any suggestions?
Thanks!
-- Will

foobar2000 with the ipod plugin will allow you to drag/drop FLAC files and when it syncs the ipod, it converts the FLAC files on the fly. MUCH better than dealing with the crappy iTunes interface and having to pre-convert the files. I absolutely loathe iTunes and it just gets worse and worse!

How to make text appear underneath an image on rollover

Hi guys,
I woul really like to creat an effect like this site:
Showcase21
If you click on past and hover over an image, you get to see text underneath as well as the image in color.
Any thoughts on how I can make that in Muse?
Kind regards,
Lester

This can be done with the Composition Widget Tooltip Preset. The images would be created with the triggers, the text that appears would be the Target content for each.

Using List to Swap Images

Hi, I had a quick questiong
I am fairly new to Dreamweaver and was wondering if anyone
knows of any tutorials that show how to use a List to swap an image
in the middle of the screen. For example I want to have a list with
different tile colors that will change the image of a tile that is
in the middle to that of those colors.

Sure...what you are looking for is called a "Disjointed
Rollover"
Here is a good tutorial:
http://www.dwfaq.com/tutorials/basics/disjointed.asp
Let us know if this is what you wanted.
"Yoyi3d" <[email protected]> wrote in
message
news:ercp4p$off$[email protected]..
> Hi, I had a quick questiong
>
> I am fairly new to Dreamweaver and was wondering if
anyone knows of any
> tutorials that show how to use a List to swap an image
in the middle of
> the
> screen. For example I want to have a list with different
tile colors that
> will
> change the image of a tile that is in the middle to that
of those colors.
>

Disjointed rollover with different size images?

Every tutorial says the disjointed rollover images MUST be the same size, etc. But for the type of photos I'm working with, it's impossible to make them the same height. This site is exactly what I'm going for with the different sized images being used: http://www.warmbloods-for-sale.com/HorseDetail.asp?HorseID=21333&UserID=1775. Any idea how they accomplish this? Or any ideas on how I can manage the same effect with different sizes in Dreamweaver CS4?

Do a Google search for Lightbox, litebox, floatbox or look at Project Seven's Image Gallery Magic.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.com/blogspot.com

Default image in CSS disjointed rollover

I have 5 pics that come up as CSS disjointed rollovers with 5 links. How can I make the first one the default, that shows up when the page loads, before the user hovers over one of the links? I tried placing the first pic on the page, just like you would any graphic, but I can't get the rollover pics to line up with it in Safari AND FF. When I get it aligned in one browser, it's slightly off in the other one. I've tried positioning by pixels, percentage and ems with no luck. Shouldn't there be something in the CSS that makes one of the pics the default? Thanks.
/** rollover change color **/
#rollover {
    padding: 0 1px 1px;
    margin-left: 0;
    font: bold 10px Verdana, sans-serif;
    text-align: center;
#rollover li {
    list-style: none;
    margin: 0;
    display: inline;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    text-align: left;
#rollover li a {
    text-decoration: none;
    background-color: #FFFFFF;
#rollover li a:link {
    color: #448;
    text-align: center;
#rollover li a:visited {
    color: #667;
    text-align: center;
#rollover li a:hover, #rollover li a:active, #rollover li a:focus{
    color: #FFF;
    visibility: visible;
    text-align: center;
    background-color: #000000;
/**disjointed image rules**/
#rollover li a span {
    visibility:hidden;
    display:block;
    position:absolute;
    left:27.8%; /**adjust image position in % or px as needed**/
    top:0%; /**adjust image position in % or px as needed**/
    text-align: center;/*color:#666;*/
#rollover li a:hover span, #rollover li a:active span, #rollover li a:focus span {
visibility:visible;

Sorry to be such a pain, but a new problem presents. The nav boxes are cut off at the top in IE 7, or, rather, IE 8 in compatibility mode.
http://www.paulcbuff.com/pcb2009/rollemover.html
No significant errors when I validated the CSS and HTML, except for _height:200px, which I tried commenting out to no avail.
Thanks!
#Relative {position: relative; margin:0 auto 14px auto; min-height:200px; _height:200px /**for IE6 Only**/ }
/**menu**/
#navlist {
    padding: 0 1px 1px;
    margin-left:0;
    font-family: Verdana, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #FFFFFF;
#navlist li {
list-style: none;
margin: 0;
display: inline;}
#navlist li a {
    padding: 0.5em 0.5em 0.5em 0.75em;
    text-decoration: none;
    background-color: #ffcc33;
    border-width: 1px;
    border-style: solid;
    border-top-color: #000000;
    border-left-color: #AAB;
    color: #FFFFFF;
#navlist li a:link {
    color: #448;
    border: 1px solid #000000;
#navlist li a:visited {
    color: #ffcc33;
#navlist li a:hover, #navlist li a:active, #navlist li a:focus{
    /**border-color: #FF9900;**/
    color: #FFF;
    visibility: visible;
    background-color: #6633cc;
    border: 1px solid #000000;
/**Default Image container**/
#defaultImage {
visibility:visible;
display:block;
position:absolute;
left:110px; /**adjust position in pixels or % **/
top:50px; /**adjust position in pixel or %**/
/**disjointed image rules**/
#navlist li a span {
visibility:hidden;
display:block;
position:absolute;
left:110px; /**position same as default image layer above**/
top:50px; /**position same as default image layer above**/
/*color:#666;*/ }
#navlist li a:hover span, #navlist li a:active span, #navlist li a:focus span {
visibility:visible;}
a img {border:none}
/**end menu**/

How to upload a file which may contain text as well as image to the server using windows phone 8 application ?

How to upload a file which may contain text as well as image to the server using windows phone 8 application ?

You're going to need to give way more detail about the situation before we can help.

Should I use text or text as image?

I'm creating a picture book for kids, using iBooks Author.
I need to decide whether to use my preferred font, which isn't supported by iOS -- in which case I'll need to make the text part of an image.
Or whether to use a font supported by iOS.
Since it's a picture book, most of each page will be one single image. If I use text not image as text, I should be able to make part of each page not image -- maybe that will reduce the file size, so the book is better for users…?
But if it doesn't make it better for users using text, then I'll use text-as-image, so I can use my preferred font.
Are there disadvantages in making each page one single image over the full screen, and using text as image, rather than actual text?
(I will have a voiceover for the book recorded by a voiceover artist, so I won't need the iBooks voiceover.)
Here's a sample illustration showing typical amount of text on a page: https://img.skitch.com/20120225-gim7e9cje5pnf1jh969xu4791a.jpg
Thanks.

If you use image-as-text you should try to make some efforts to ensure that users with disabilities have some form of access to your content and test the experience yourself.
Be sure to set an Accessibility Description for each image with the missing text for user with screen readers. Also be sure to provide the same for any trigger you're using to provide the actor's voiceover if it can be interacted with.
You can test with VoiceOver on your iPad and should really try your book with VoiceOver Screen Curtain enabled.
http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/ iPhoneAccessibility/Testing_Accessibility/Testing_Accessibility.html
http://support.apple.com/kb/HT3577

Swap Background image using ActionScript

I need to know how to change (swap) background images.
Explanation:
The main file (level 0) is named "Master".
In the Master timeline, the lowest layer is named "bg" (for
backgrround).
On the bg layer is an image the size of the stage, and this
image forms the background against which other movie clips (.swf)
are shown.
Purpose:
In response to a user (ie: the user clicks a button), I want
to change the background image.
Problem:
I have searched through Flash 8 Help system, and cannot find
how to delete the 1st image from the "bg" layer, and add a
different image.
Hoping someone knows the answer,
Thanks,
John

convert your image to a movieclip. you can then use
movieclipInstanceName.removeMovieClip() to remove it. or, if you
might want to use it latter in your swf, change its _visible
property.

How to I add text on top of image? I am using pages version 5.2.2

I am working on an apple desk top OSX version 10.9.4. Since the new pages version 5.2.2 came out, I have been unable to add text on top of an image. Can anyone help me? Thanks ahead of time.

Pages v5 is not as flexible as Pages ’09 v4.3. If you want text over a free-standing image in your document, then you will need to place it in a Text Box, Shape, or other custom container created with the Unite, Intersect, Subtract, or Exclude items in the Arrange panel. Simply selecting the image and then, in the Arrange tab, stating move with text; setting wrap to none, and clicking back/ward — does not help.
You will need one of the containers from the second sentence positioned on top of your image. Once your text is input and styled, select the Text Box and the image, then from the Arrange tab, select group to maintain your text/image spatial relationship. If you need the image and its text container to adapt to other text in your document, you can enable the wrap functionality that best suits your document goals.
This can get interesting, because you can independently define the selected Text Box content as a text placeholder, and the image as a media placeholder. Save it as a template. When you open a new document with this template, you can drag and drop a new image onto the old one, and it is automatically scaled and replaced without effecting the Text Box content. You can then double-click the Text Box content and change it.

Disjointed rollover on a apDiv (CS5.5)

Hi There, I'm working on a disjointed rollover using css. I want to apply this on an apDiv but somehow it's not working.
Here's what I try to do:
I have a div with a big animated gif that auto starts.
On top of that I have an apDiv with a small logo (animated gif) that fades in with jQuery after the big animated gif is done.
This is all working fine.
Now I want to make the small logo to act as a rollover, revealing an image somewhere on top of the main div.
With the present css the small image that suppose to become visible when you hover over the logo doesn't show. Here's my code:
body {
          margin-left: 0px;
          margin-top: 0px;
          margin-right: 0px;
          background-color: #ECF1F5;
          text-align: center;
#main {
          height: 540px;
          width: 960px;
          margin-right: auto;
          margin-left: auto;
          background-color: #FFF;
          z-index: 0;
.main_img {
          margin-top: 0px;
          margin-right: 60px;
          margin-left: 60px;
          background-color: #FFF;
#h2 {
          background-color: #FFF;
          height: 80px;
          width: 960px;
          margin-right: auto;
          margin-left: auto;
.adres {
          margin-top: 10px;
          margin-left: 116px;
          display: none;
#wrapper {
          height: 620px;
          width: 960px;
          margin-right: auto;
          margin-left: auto;
          top: 0px;
#apDiv1 {
          position:absolute;
          width:900px;
          height:424px;
          z-index:1;
#pen {
          margin-top: 200px;
          margin-left: -100px;
#rollover {
          margin-left: 702px;
          margin-top: 60px;
          height: 92px;
          width: 194px;
          z-index: 2;
          display: none;
#rollover a {
          border:none;
          text-decoration:none;
          position: relative;
          margin-bottom: 100px;
#rollover a span {
          display:none;
          position: absolute;
          /**adjust positioning of full size images in px or %**/
left: -300px;
          top: 300px;
          z-index: 3;
#rollover a:hover span, #rollover a:active span, #rollover a:focus span {
          display:block;
What have I done wrong here? I am by no means a code junkie so I can use all the help I can get.
Thanks in advance!

<!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" />
<meta name="description" content="info" />
<meta name="robots" content="index,follow,noarchive" />
<meta name="keywords" content="info" />
<title>name website</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
     $('#rollover').delay(6500).fadeIn(1500);
     $('.adres').delay(7500).fadeIn(1000);
    /* $('#panel').delay(11000).fadeIn(1000);*/
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
</script>
<style type="text/css">
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    background-color: #ECF1F5;
    text-align: center;
#main {
    height: 540px;
    width: 960px;
    margin-right: auto;
    margin-left: auto;
    background-color: #FFF;
    z-index: 0;
.main_img {
    margin-top: 0px;
    margin-right: 60px;
    margin-left: 60px;
    background-color: #FFF;
#h2 {
    background-color: #FFF;
    height: 80px;
    width: 960px;
    margin-right: auto;
    margin-left: auto;
.adres {
    margin-top: 10px;
    margin-left: 116px;
    display: none;
#wrapper {
    height: 620px;
    width: 960px;
    margin-right: auto;
    margin-left: auto;
    top: 0px;
#apDiv1 {
    position: absolute;
    width: 900px;
    height: 424px;
    z-index: 1;
#pen {
    margin-top: 200px;
    margin-left: -100px;
#rollover {
    margin-left: 702px;
    margin-top: 60px;
    height: 92px;
    width: 194px;
    z-index: 2;
    display: none;
span#info {
    display: none;
a#infotrigger:hover span#info {
    position: absolute;
    left: 160px;
    top: 240px;
    width: 349px;
    height: 89px;
    position: absolute;
    display: block;
</style>
</head>
<body>
<div id="wrapper">
<div id="apDiv1"> <a href="#" id="infotrigger"><img src="images/logo_r.gif" alt="adress details" name="rollover" id="rollover" /> <span id="info"> <img src="images/26letters.png" alt=" headline" name="panel" border="0" usemap="#panelMap" id="panel" />
    <map name="panelMap" id="panelMap">
      <area shape="poly" coords="14,19" href="#" />
      <area shape="poly" coords="12,21,31,70,324,80,338,8" href="mailto:[email protected]" alt="email" />
    </map>
    </span></a></div>
<div class="main" id="main"> <img src="images/h1.gif" alt="headlines" name="main_img" width="840" height="540" class="main_img" id="main_img" />
    <div class="h2" id="h2"><img src="images/h2.png" alt="adress details" name="adres" width="718" height="26" border="0" usemap="#adresMap" class="adres" id="adres" />
      <map name="adresMap" id="adresMap">
        <area shape="rect" coords="0,2,163,34" href="mailto:[email protected]" alt="email" />
      </map>
    </div>
</div>
</div>
</div>
</body>
</html>
In bold is what I've added. Some lines from your old code have been removed.
What I've done here is used pure CSS (no jQuery) to trigger a display of an element on hover. But, do note that image maps here are pointless as the 'info' image will be shown only when you hover on logo - will disappear again when you mouseout from logo. So, an image map will make no sense.
-ST

Disjointed rollover contained to fixed spot

I'm trying to do a disjointed rollover, however after I have a grid of thumbnails I want my enlargemnt to be contained to a specific area. I this case it's the right saide bar. I found a good tutorial that got me this far, but can't seem to find out how to do the next step. I don't want the enlargemnt relative to thumbnai. I want it in fixed position.
Here is my code so far:
<!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">

</style>

<script type="text/javascript" src="includes/jQueryGallery/gallery.extend.js"></script>
<script type="text/javascript" src="includes/jQueryGallery/jQueryGallery.js"></script>
<script type="text/javascript" src="includes/jQueryGallery/jQueryGallery21.js"></script>
<link href="includes/jQueryGallery/jQueryGallery21.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="header"><a href="#"><img src="" alt="Insert Logo Here" name="Insert_logo" width="20%" height="90" id="Insert_logo" style="background-color: #8090AB; display:block;" /></a>
    </div>
<div class="sidebar1">
    <ul class="nav">
      <li><a href="#">Link one</a></li>
      <li><a href="#">Link two</a></li>
      <li><a href="#">Link three</a></li>
      <li><a href="#">Link four</a></li>
    </ul>
    <p> The above links demonstrate a basic navigational structure using an unordered list styled with CSS. Use this as a starting point and modify the properties to produce your own unique look. If you require flyout menus, create your own using a Spry menu, a menu widget from Adobe's Exchange or a variety of other javascript or CSS solutions.</p>
    <p>If you would like the navigation along the top, simply move the ul.nav to the top of the page and recreate the styling.</p>
    </div>
<div class="content">
    <h1> </h1><div id="rollover">
<p>
<a href="#"><img src="file:///C|/GSLD Website/images/Civic/Civic Adjustments/a2mclobb_thumb.jpg" width="81" height="78" /> /><span><img src="file:///C|/GSLD Website/images/Civic/Civic Adjustments/bloomfieldexterior.jpg" width="768" height="532" /><br />
optional caption #1</span></a>
<a href="#"><img src="SmallIcons/image.png" alt="" /><span><img src="FullSize/image.jpg" alt=" " /><br />optional caption #2</span></a>
<a href="#"><img src="SmallIcons/image.png" alt="" /><span><img src="FullSize/image.jpg" alt=" " /><br />optional caption #3</span></a>
</p>
</div> </p>
    <p> Be aware that if you use the Property inspector to navigate to your logo image using the SRC field (instead of removing and replacing the placeholder), you should remove the inline background and display properties. These inline styles are only used to make the logo placeholder show up in browsers for demonstration purposes. </p>
    <p>To remove the inline styles, make sure your CSS Styles panel is set to Current. Select the image, and in the Properties pane of the CSS Styles panel, right click and delete the display and background properties. (Of course, you can always go directly into the code and delete the inline styles from the image or placeholder there.)</p>
    <h4>Internet Explorer Conditional Comments</h4>
    <p>These liquid layouts contain an Internet Explorer Conditional Comment (IECC) to correct two issues. </p>
    <ol>
      <li>Browsers are inconsistent in the way they round div sizes in percent-based layouts. If the browser must render a number like 144.5px or 564.5px, they have to round it to the nearest whole number. Safari and Opera round down, Internet Explorer rounds up and Firefox rounds one column up and one down filling the container completely. These rounding issues can cause inconsistencies in some layouts. In this IECC there is a 1px negative margin to fix IE. You may move it to any of the columns (and on either the left or right) to suit your layout needs.</li>
      <li>The zoom property was added to the anchor within the navigation list since, in some cases, extra white space will be rendered in IE6 and IE7. Zoom gives IE its proprietary hasLayout property to fix this issue.</li>
    </ol>
    
</div>
<div class="sidebar2">
    <h4>Backgrounds</h4>
    <p>By nature, the background color on any div will only show for the length of the content. If you'd like a dividing line instead of a color, place a border on the side of the .content div (but only if it will always contain more content).</p>
    </div>
<div class="footer">
    <p>This .footer contains the declaration position:relative; to give Internet Explorer 6 hasLayout for the .footer and cause it to clear correctly. If you're not required to support IE6, you may remove it.</p>
    </div>
</div>
</body>
</html>

#rollover a {
border:none;
text-decoration:none;
padding: 0 0.5em 0 0.5em; /**space between icons**/
position: relative; /**remove position rule if full size images will share the same display area. **/
Your CSS below expresses where on the page to display the disjointed image. You'll need to tweak left and top values to get it exactly where you want it.
#rollover a span {
    visibility: hidden;
    background-color: #FFF;
    display: block;
   position: absolute;
    /**adjust positioning of full size images in px or %**/
    left: 250px;
    top: -140px;
For better answers, give us a link to your test page.
Nancy O.

Disjointed rollover problem

Hi everyone.. I am trying to create a slideshow using
disjointed rollovers. I have several (16 so far) thumbnail images
and want to display fullsize images in one common area. The
problem: as I add more images, the earlier ones become blocked from
view. It appears to have something in front of it of the same size
and shape as the images I'm using, and the same color as the
background. The use of layers doesn't seem to make a difference.
The more images I add, the more (earlier ones) become blocked.
Anyone? Thanks in advance.

Here is the URL: It's not ready to be live, so may be slow.
Thanks for looking.
http://www.so-fsbo.com/ss2.htm
As for my method: I am open to suggestions for a better way
to accomplish what is seen at link, above.
But here is what I did. The exact method is (copied from
Fireworks F1):
To attach a disjoint rollover to a selected image:
Choose Edit > Insert > Slice to attach a slice to the
trigger image.
Create a new frame by clicking the New/Duplicate Frame button
in the Frames panel.
Place a second image, to be used as the target, in the new
frame in the desired location on the canvas. You can place the
image anywhere other than beneath the slice you created in step 1.
Select the image, and then choose Edit > Insert > Slice
to attach a slice to the image.
Select Frame 1 in the Frames panel to return to the frame
that has the original image.
Select the slice, hotspot, or button that covers the trigger
area (the original image) and place the pointer over the behavior
handle. The pointer changes into a hand.
Drag the behavior handle for the trigger slice to the target
slice you created in step 4.
The behavior line extends from the center of the trigger to
the upper left corner of the target slice, and the Swap Image
dialog box opens.
From the Swap Image From pop-up menu, select the frame you
created in step 2, and click OK.
Click the Preview tab to view and test the disjoint rollover.

Disjointed Rollover Link

Hi,
I'm not sure if this is even remotely possible using solely HTML and CSS.
The idea is that I have a disjointed Rollover with the OnMouseOut for Image Restore deleted.
Then in the rollover there will be 2 different links to click.
So in essence
Mouseover Object 1 > Rollover 1 Pops up with 2 Different links
MouseOut Object 1 > Rollover 1 stays
Rollover 1 Link gets clicked and takes user to another page.
There's a good chance I could of described this better...
Anyway, Thanks in advance!

Thanks -
This is the code you posted, but it shows no code to accomplish your rollover
(you can paste any future code here in the Forum)
<html>
<head>
<title>Untitled-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table id="Table_01" width="1366" height="768" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5">
<img src="images/index_01.png" width="1366" height="63" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/index_02.png" width="61" height="705" alt=""></td>
<td>
<img src="images/index.png" width="556" height="646" alt=""></td>
<td rowspan="2">
<img src="images/index_04.png" width="134" height="705" alt=""></td>
<td><a href="../Slide/Slide.html"><img src="images/index_05.png" width="556" height="646" alt=""></a></td>
<td rowspan="2">
<img src="images/index_06.png" width="59" height="705" alt=""></td>
</tr>
<tr>
<td>
<img src="images/index_07.png" width="556" height="59" alt=""></td>
<td>
<img src="images/index_08.png" width="556" height="59" alt=""></td>
</tr>
</table>

</body>
</html>
See this link for what is needed for rollover
http://spot.pcc.edu/~gkerr/cas211d/coursefiles/css_examples/rollovers/css_disjointed_rollo ver_example.html
Since you want clickable links, you might try show/hide behavior

Using text to swap an image (disjointed rollover)

Similar Messages

Maybe you are looking for