Div with a image

Hi ,guys, when I use the image on the site and div to control
its position, I put the div and text together in the layout.But i
am not sure how to layout and make them look well as the image
overlap the text and hide some of the content. How to avoid this
problem?
Any help is appreciate.

Not really. I'd like to see the whole page, please, so I can
look at both
the code and the relevant CSS.
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
==================
"ahmultHoAngel" <[email protected]> wrote in
message
news:fm3k2l$t53$[email protected]..
> Hi, this is the part I use for div and the content. Hope
this helps
>
> <body topmargin="0" >
> <div id="apDiv1"><span class="test4"><img
src="../v1/images/capral.jpg"
> alt=""
> width="224" height="98" align="right"
/></span></div>
> <table class="test1" width="816" border="0"
align="center" cellpadding="0"
> cellspacing="0" >
> <tr>
> <td><img src="images/index7bSlice1_02.jpg"
width="815" height="168"
> border="0" usemap="#Map" /></td>
> </tr>
> <tr>
> <td><img src="images/index7bTestimonial_04.jpg"
width="815"
> height="67"
> /></td>
> </tr>
> <tr >
> <td class="test2"
background="images/index7bSlice1_06.jpg"><p
> class="test3">
Manager </p>
> <p class="test4" align="left">
'In a world where risk assessment has
> become a part of our everyday lives,....' <br
/>
>
Richard<br />
>
Ag Business Manager<br />
>
William </p>
>

Similar Messages

Populate Empty DIV with Background Image

I have a three columns page layout, a centered content column accompanied by two side columns. Those two side columns are empty. How do you set the background image (not color) repeating in the side empty DIVs and make them extending as long as the content column goes? You can do this effortlessly in table cell, but why is it almost making one knocking down a wall to accomplish such an easy task? BTW One of the tutorials on your website introduces a way to do it by setting a background color on the container DIV and claiming content DIV color white, thus making the sidebar bearing a background color, also at the same length as the container DIV. I can't seem to understand its logic.

joycwang wrote:
I have a three columns page layout, a centered content column accompanied by two side columns. Those two side columns are empty. How do you set the background image (not color) repeating in the side empty DIVs and make them extending as long as the content column goes? You can do this effortlessly in table cell, but why is it almost making one knocking down a wall to accomplish such an easy task? BTW One of the tutorials on your website introduces a way to do it by setting a background color on the container DIV and claiming content DIV color white, thus making the sidebar bearing a background color, also at the same length as the container DIV. I can't seem to understand its logic.
I don't fully understand what you have said below?
'How do you set the background image (not color) repeating in the side empty DIVs and make them extending as long as the content column goes? '
(not color) is the bit that confuses me?
You have a background image that you want behind all 3 columns? This background image is not color? Is it an image?

How can I place an image hot spot on top of a ap div with an image in the background of the ap div?

It won't let me

Right. You can't make an image map out of a background. You must insert the image directly into the page (HTML markup). Then apply hotspot tools to the image.
HTML Image Map
http://w3schools.com/html/tryit.asp?filename=tryhtml_areamap
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Space between DIV with image and DIV with image background

I have just about finalized the new design on my website. The only issue I am having now is on the gallery page. There is a thin space between a DIV with an image and DIV with an image background. I am using these DIV's to give the illusion of a blue border. If you look at any of the other main pages on the site the space is not there. Any ideas?
http://liquidfirefishing.com/index.php
http://liquidfirefishing.com/gallery/main.php
Here are a couple of screenshots to show exactly what I mean.

Hello,
both my "IE8" and my "FF 7.01" show the blue boundary lines. Here my screenshots, left side IE8, right side FF:
Header 1
Header 2
Hans-Günter

Make page with multiple divs containing multiple images expand...

Hello DW Masters,
I am trying to get the following prototype page to expand to the width of the browser window and contract to a minimum width of 1024px while keeping the white div spacers that are seperating the images at the same proportions of 5px;
http://stylegeneric.com/westEnd25/building_overview.htm (the page source is extremely simple right now)
Below is the css; as you can see, I have the content set to a max width of 1024px;, what I want to do is expand the divs and the images contained in the divs on the page to the a max width of 1660 px and a proportional height that will fill a browser window that is a max of 1660px. I was struggling with this all yesterday; I've been scouring the web looking for a pure html4/css2 solution, as I can't utilize html5/css3 right now. I'm under the impression that this can not be done with just html and css - could anyone shed some light on how to accomplish this feat? I have many pages with many different layouts that I would need to implemenet. If the answer is "This can not be done.", I will accept that; I just don't want to continue chasing a white rabbit.
Thanks so much,
~Chipleh
.west25Container{
width:1024px;
height:429px;
.west25Description{
float:left;
.west25LeftVertSpacer{
height:429px;
width:5px;
float:left;
.west25CenterSpacer{
float:inherit;
height:429px;
width:5px;
position:inherit;
.west25HorzSpacer{
height:4px;
width:213px;
.overviewImage{
float:left;
.overviewImage2{
.lobbyImage{
height:211px;
width:213px;

What might be quick 'n easy (in relative terms) is to open an 11 x 17 Word file.
Then insert, size / locate images as desired.
Now use Acrobat's PDFMaker to output the PDF file.
Be well...

More insight on divs with fluid grids please!

Help me come further up the CS6 fluid grid learning curve, please!
I'm adapting an exiting site to fluid grids. After creating the template for the primary pages, I have two major issues at this point(yeah, only two, SO FAR).
1- I have a vertically expanding menu in the first layout div. For tablets, I want to preserve the left grid column space for the menu, regardless of its length, and all other content would use just the right gid columns. But when the menu happens to be short, the "excess" content floats left under the menu grid columns. How can I force main page content to only occupy the right grid columns, regardless of the length of the menu?
As a side point to the menu, what happens when I try to put this (or the footer) all back in an SSI, as it originally was?
2 - I've seen the note about no support for nested layout divs. Thru trial and error, I'm still trying to figure out just what this means. Pragmatically, what is the greater implication of this? Can format be controlled only on fluid grid layout divs? Can't I have divs inside of a grid layout div to control image palcement around the text for instance? I've had hit=n-miss experience with this so far.
Can anybody point me to a more in-depth discussion on this topic?
Sorry if this ol' dog seems like he's learning div layout all over again. But hey! That IS how it feels!
Thanks for any education, or pointers to such, that you can provide.

Not sure I completely understand what you want. But in this example, I have set nav and LayoutDivs 5, 6, 7 to display:none in smaller devices.
http://alt-web.com/FluidGrid/Fluid2.html
I did this inside a media query within my Content.css file:
/* Special Rules for Mobiles. */
@media only screen and (max-width: 480px) {
   /**hide some divs**/
     nav, #LayoutDiv5, #LayoutDiv6, #LayoutDiv7 { display: none }
     /**show jQuery buttons**/
     #togglenav { display: block }
     #showDivs { display: block }
Then I used a simple jQuery toggle to show/hide divs.
http://jsfiddle.net/NancyO/AP9Hm/
Nancy O.

Help with scrolling image gallery?

Hi, using the code for a scrolling image gallery found here (Build an Infinite Scrolling Photo Banner With HTML and CSS | Design Shack). When I pasted in the CSS and HTML, it displayed all vertically and broke my title div. Not a professional, so I could use an expert eye to point out any mistakes. Trying to make title in vertical center of page, scrolling image gallery horizontal in the middle, and links directly below. HTML is below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Marc Moss Art</title>



<link href="style.css" rel="stylesheet" type="text/css">
<link href="../../../../style.css" rel="stylesheet" type="text/css">

</head>
<body topmargin="600">
<div id="wrapper">
<div class="container">
<header></header>
<div id="content" style="height:300px;width:1000px;float:left;"><h1>art by marc moss</h1>
</div>
    
    <div class="photobanner">
        <img class="first" src="../../../../mosspictures/DSCN0038.JPG" alt="">
        <img src="../../../../mosspictures/DSCN0040.JPG" alt="">
        <img src="image-3.jpg" alt="">
        <img src="image-4.jpg" alt="">
        <img src="image-5.jpg" alt="">
        <img src="image-6.jpg" alt="">
        <img src="image-1.jpg" alt="">
        <img src="image-2.jpg" alt="">
        <img src="image-3.jpg" alt="">
        <img src="image-4.jpg" alt="">
    </div>
    <nav>
    <div id="navigation">
    <ul>
    <li><a href="#">bio</a></li>
    <li><a href= "#">inspiration</a></li>
    </ul>
    </div>
    </nav>
</article>
<footer>
</footer>
</div>
</div>
</body>
</html>

Is this supposed to be a WordPress site? None of these images are found on the server. Those folders don't exist either.
<img class="first" src="mosspictures/DSCN0038.JPG" alt="">
   <img src="mosspictures/DSCN0040.JPG" alt="">
   <img src="wordpress/wp-content/themes/MarcMossTheme/image-3.jpg" alt="">
   <img src="wordpress/wp-content/themes/MarcMossTheme/image-4.jpg" alt="">
   <img src="wordpress/wp-content/themes/MarcMossTheme/image-5.jpg" alt="">
   <img src="wordpress/wp-content/themes/MarcMossTheme/image-6.jpg" alt="">
   <img src="wordpress/wp-content/themes/MarcMossTheme/image-1.jpg" alt="">
   <img src="wordpress/wp-content/themes/MarcMossTheme/image-2.jpg" alt="">
   <img src="wordpress/wp-content/themes/MarcMossTheme/image-3.jpg" alt="">
   <img src="wordpress/wp-content/themes/MarcMossTheme/image-4.jpg" alt="">
Nancy O.

CSS problems in CS4 with multiple images on a page...

I seem to have a ton of questions going in this forum, sorry if it's painful.
Here's my latest issue.(DW CS4)
I created a blank html page and linked a CSS file to it. I dropped a bunch of images into the body and wrapped them in a div with an id of "thumbnails"
I clicked on my img tag right below the Design window and clicked the "new css rule" button in the CSS Styles window and gave my images a margin of 40 px. I clicked "OK" and my changes took effect in the Design window, but when I previewed it in the browser (Firefox and IE) none of the CSS was taking effect, all the images were still crammed together. Same thing for the "Live View" Button, I'm not sure what happened, or why the CSS won't take effect.
Can somebody help me?
Thanks all,
Aza

My HTML follows-----
<!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>
<link href="../CssFiles/oneColLiqCtrHdr.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="oneColLiqCtrHdr" id="Thumbnails"><img src="../images/Jewelry/Thumbnails/T_Bracelets/Bellarri_ColoredStone_Over10k_1.jpg" width="166" height="150" alt="Bellari" /><img src="../images/Jewelry/Thumbnails/T_Bracelets/CynthiaGregg_Gold_Over5k_1.jpg" width="178" height="150" alt="Cynthia Gregg" />
<img src="../images/Jewelry/Thumbnails/T_Bracelets/FrankRuebel_BestBracelet_2501_5k_1.jpg" width="150" height="150" alt="Frank Ruebel" />
<img src="../images/Jewelry/Thumbnails/T_Bracelets/Gabriel_BestBracelet_2501_5k_1.jpg" width="156" height="150" alt="Gabriel" />
<img src="../images/Jewelry/Thumbnails/T_Bracelets/GeralynSheridan_FashionBridge_500Under_1.jp g" width="178" height="150" alt="Geralyn Sheridan" />
<img src="../images/Jewelry/Thumbnails/T_Bracelets/Jyes_Legends_Over5k_1.jpg" width="150" height="150" alt="Jyes Legends" />
<img src="../images/Jewelry/Thumbnails/T_Bracelets/Maevona_BestBracelet_5001_10k_1.jpg" width="166" height="150" alt="Maevona" />
<img src="../images/Jewelry/Thumbnails/T_Bracelets/SalPraschnik_Legends_Over5k_1.jpg" width="208" height="150" alt="Sal Praschnik" />
<img src="../images/Jewelry/Thumbnails/T_Bracelets/Sara_BestBracelet_Over10k_1.jpg" width="156" height="150" alt="Sara" />
<img src="../images/Jewelry/Thumbnails/T_Bracelets/Starhaven_Silver_501_1k_1.jpg" width="166" height="150" alt="Starhaven" />
<img src="../images/Jewelry/Thumbnails/T_Bracelets/SylvaCie_BestBracelet_Over10k_1.jpg" width="150" height="150" alt="Sylva Cie" /></div>
</body>
</html>
*************CSS FOLLOWS********************
@charset "utf-8";
body {
    background: #666666;
    margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    padding: 0;
    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    color: #000000;
    background-color: #000000;
#jewelryFrame {
    font-family: Georgia, "Times New Roman", Times, serif;
    color: #CCC;
#jewelryFrame p {
    font-size: 12px;
    padding-bottom: 75px;
.oneColLiqCtrHdr #container {
    width: 100%; /* this will create a container 80% of the browser width */
    background: #FFFFFF;
    margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
    border: 1px solid #000000;
    text-align: center; /* this overrides the text-align: center on the body element. */
    background-color: #000000;
    max-width: 960px;
    min-width: 800px;
.oneColLiqCtrHdr #header {
    background: #DDDDDD;
    padding: 0;
    width: 960px;
    height: 141px;
    background-color: #000000;
    color: #CCA4A5;
    font-size: 11px;
    font-style: normal;
    font-family: Goudy Old Style;
    background-image: url(../images/CPJ-Header.png);
.oneColLiqCtrHdr #header h1 {
    margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
    padding: 30px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
    color: #FFFFFF;
#navbar {
    background: #999999;
    height: 29px;
    width: 960px;
    background-color: #000000;
    background-image: url(../images/CPJ-NavLT.png);
    background-repeat: repeat;
.oneColLiqCtrHdr #container #navbar img {
    border-width: 0px;
    border-style: 0;
    border: 0;
#sideBarLeft {
    float: left;
    width: 30%;
    height: 100%;
    min-width: 250px;
    padding-top: 50px;
    padding-left: 40px;
    padding-right: 40px;
.oneColLiqCtrHdr #container #sideBarLeft p {
    text-align: justify;
    font-size: 12px;
.oneColLiqCtrHdr #container #sideBarLeft h2 {
    font-size: 14px;
.oneColLiqCtrHdr #container #sideBarLeft h1 {
    font-size: 24px;
.oneColLiqCtrHdr #container #sideBarLeft {
    color: #CCC;
    padding-top: 15%;
    padding-bottom: 15%;
.oneColLiqCtrHdr #mainContent {
    padding: 0 60px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
    background: #FFFFFF;
    background-color: #000000;
    color: #969696;
    font-family: "Goudy Old Style";
    font-size: 18px
    text-align: center;
    vertical-align: middle;
    min-height: 500px;
.oneColLiqCtrHdr #container #mainContent p {
    font-family: "Goudy Old Style";
    font-size: 18px;
.oneColLiqCtrHdr #container #mainContent h1   {
    padding: 0px;
    font-family: Georgia, "Times New Roman", Times, serif;
    color: #969696;
    font-family:"Goudy Old Style";
    font-size:36px;
.oneColLiqCtrHdr #container #mainContent h6 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 72px;
    font-weight: bold;
    vertical-align: middle;
    line-height: normal;
    color: #CCC;
.oneColLiqCtrHdr #container #mainContent #staticprivacy h3 {
    padding: 0px;
#jewelryFull {
    padding-top: 25px;
    padding-right: 0px;
    padding-bottom: 25px;
    padding-left: 0px;
    font-family: Georgia, "Times New Roman", Times, serif;
    float: none;
    width: 100%;
    max-width: 960px;
    background-image: url(../images/CPJ--MainBG_slice_15.png);
.oneColLiqCtrHdr #container #mainContent #jewelryFull {
    font-family: Arial, Helvetica, sans-serif;
    color: #CCC;
.oneColLiqCtrHdr #container #mainContent #jewelryFull img {
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #CCC;
    border-right-color: #666;
    border-bottom-color: #666;
    border-top-width: medium;
    border-right-width: medium;
    border-bottom-width: medium;
    border-left-width: medium;
    margin-top: 25px;
.oneColLiqCtrHdr #container #mainContent #jewelryFull p {
    text-align: justify;
    margin-top: 0px;
    font-size: 10px;
.oneColLiqCtrHdr #container #mainContent #mycarousel {
    text-align: center;
    height: 500px;
.oneColLiqCtrHdr #footer {
    padding: 0; /* this padding matches the left alignment of the elements in the divs that appear above it. */
    background:#DDDDDD;
    background-image: url(../images/CPJ-Red-Footer.png);
    height: 63px;
    width: 960px;
    vertical-align: top;
    list-style-type: none;
    clear: both;
#BottomNav {
    font-family: "Arial Black", Gadget, sans-serif;
    font-size: 11px;
    color: #CCC;
    height: 100%;
    margin: 0;
.oneColLiqCtrHdr #container #footer #BottomNav ul {
    list-style-type: none;
.oneColLiqCtrHdr #container #footer #BottomNav ul li {
    display: inline;
.oneColLiqCtrHdr #container #footer #BottomNav ul li a {
    list-style-type: none;
    list-style-image: none;
    float: right;
    padding-right: 45px;
    color: #969696;
    text-decoration: none;
    font-weight: 500;
    font-family: Arial, Helvetica, sans-serif;
    padding-top: 10px;
.oneColLiqCtrHdr #footer p {
    margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
    padding: 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
    color: #FFF;
    text-align: right;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
#quotes {
    text-align: center;
    margin-right: 65px;
    float: none;
#quoteright {
    text-align: right;
    margin-right: 65px;
#quotesleft {
    text-align: left;
    text-indent: 65px;
#companyTitle {
    font-family: "Lucida Console", Monaco, monospace;
    font-size: 24px;
#medImageArea {
    width: 100%;
    height: 50px;
#Thumbnails img {
    padding: 40px;
************Thank you****************

Changing my style sheet is causing problems with my images

www.britolequstrianservices.co.uk
After eventually getting my gallery images correct with lots of help on here, i'm back.
I am following a video of changing my page layout on this particular page but it makes my images go wrong. The instructions I am following is telling me to do a new #content-fullwidth 100% so I can use all of the conent area that I want to do and then chage the div id to content full width. This works but then my images don't work properly. And when I load up to the server it says about my photos changing. I up loaded it as I said but my gallery page don't work. I have now put everything back to it was but I still want to use the who content area. I know it's something to do with my photos in my gallery being within my content area but not too sure what. Appreciate help again! Thanks you busy people.
<div id="content">
            <h1>Gallery</h1>
                <div id="gallery">
                <a href="images/photos/1.jpg" title="12x12ft Stable">
                <img src="images/photos/1a.jpg" width="120" height="80" /></a>
                <a href="images/photos/2.JPG" title="12x12ft Shelter">
                <img src="images/photos/2a.jpg" width="120" height="80" /></a>
                <a href="images/photos/3.jpg" title="12x24ft Stable">
#content                               { width:650px; float:left; }
#footer                               { clear:both; margin-top:20px 0; border-top:1px #ccc solid;
                                                   padding-bottom:20px; }

On your current gallery.html page all of your thumbnail images are inserted in the <div> with the id 'gallery' (see below)
<div id="gallery">
                <a href="images/photos/1.jpg" title="12x12ft Stable">
                <img src="images/photos/1a.jpg" width="120" height="80" /></a>
                <a href="images/photos/2.JPG" title="12x12ft Shelter">
                <img src="images/photos/2a.jpg" width="120" height="80" /></a>
                <a href="images/photos/3.jpg" title="12x24ft Stable">
                <img src="images/photos/3a.jpg" width="120" height="80" /></a>
                <a href="images/photos/4.JPG" title="12x24ft Stable">
                <img src="images/photos/4a.jpg" width="120" height="80" /></a>
                <a href="images/photos/5.jpg" title="12x24ft Stable">
                <img src="images/photos/5a.jpg" width="120" height="80" /></a>
                <a href="images/photos/6.jpg" title="12x24ft Stable">
                <img src="images/photos/6a.jpg" width="120" height="80" /></a>
                <a href="images/photos/7.jpg" title="12x24ft Stable">
                <img src="images/photos/7a.jpg" width="120" height="80" /></a>
                <a href="images/photos/8.JPG" title="12x24ft Stable">
                <img src="images/photos/8a.jpg" width="120" height="80" /></a>
                <a href="images/photos/9.JPG" title="12x24ft Stable">
                <img src="images/photos/9a.jpg" width="120" height="80" /></a>
                <a href="images/photos/10.jpg" title="12x24ft Stable">
                <img src="images/photos/10a.jpg" width="120" height="80" /></a>
                <a href="images/photos/11.JPG" title="12x24ft Stable">
                <img src="images/photos/11a.jpg" width="120" height="80" /></a>
                <a href="images/photos/12.jpg" title="12x24ft Stable">
                <img src="images/photos/12a.jpg" width="120" height="80" /></a>
                <a href="images/photos/13.JPG" title="12x24ft Stable">
                <img src="images/photos/13a.jpg" width="120" height="80" /></a>
                <a href="images/photos/14.jpg" title="12x24ft Stable">
                <img src="images/photos/14a.jpg" width="120" height="80" /></a>
                <a href="images/photos/15.jpg" title="12x24ft Stable">
                <img src="images/photos/15a.jpg" width="120" height="80" /></a>
                <a href="images/photos/16.JPG" title="12x24ft Stable">
                <img src="images/photos/16a.jpg" width="120" height="80" /></a>
                <a href="images/photos/17.jpg" title="12x24ft Stable">
                <img src="images/photos/17a.jpg" width="120" height="80" /></a>
                <a href="images/photos/18.jpg" title="12x24ft Stable">
                <img src="images/photos/18a.jpg" width="120" height="80" /></a>
                <a href="images/photos/19.jpg" title="12x24ft Stable">
                <img src="images/photos/19a.jpg" width="120" height="80" /></a>
                <a href="images/photos/20.jpg" title="12x24ft Stable">
                <img src="images/photos/20a.jpg" width="120" height="80" /></a>
            </div>
In your lightbox css file the gallery <div> is set to a specific width of 580px (see below)
#gallery {
padding:10px;
width:580px; /* Sets width of gallery */
Your thumbnail images won't go right across the page as a consequence of it being set to 580px wide.
Also I have no idea what you mean by:
'but then my images will not display properly on my website.'
How don't they display correctly? Do they disappear, appear top to bottom, left to right, inside out or back to front, suddenly appear with MIckey Mouse faces all over them?
If you post in the forum at least give some detailed explanation of what it is that is happening. No one is a mind reader!

Email template with an image

Hi,
I would create an email template with an image embedded.
I created the email template with outlook on my PC. The body is the following.
<body lang=EN-US link=blue vlink=purple><div align=right style='text-align:right'><![if !vml]><img width=152 height=91 src="cid:[email protected]" align=right hspace=12 alt="Description: LOGOXYZ_resized" v:shapes="Picture_x0020_1"><![endif]><b><u><span lang=IT
style='color:black'><o:p></o:p></span></u></b></p><p style='<b><u><span lang=IT>SI RACCOMANDA DI LEGGERE ATTENTAMENTE QUESTA LETTERA E DI CONSERVARLA</span></u></b><span lang=IT
style='color:black'><o:p></o:p></span></p><p style='<span lang=IT style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D'><o:p> </o:p></span></p><p style='<span lang=IT>Si
comunica che sono state attivate le credenziali di [//Target/LastName] [//Target/FirstName] per l'accesso alla Rete.<span style='color:#1F497D'><o:p></o:p></span></span></p><p style='<b>Scadenza: </b><span
lang=IT>[//Target/EmployeeEndDate]</span><b> </b><span style='color:#1F497D'><o:p></o:p></span></p><table border=0 cellspacing=0 cellpadding=0 style='border-collapse:collapse'><tr><td
width=225 valign=top style='width:168.5pt;border:solid windowtext 1.0pt;padding:0cm 5.4pt 0cm 5.4pt'><p align=center style='text-align:center'><b>Applicazione</b><o:p></o:p></p></td><td width=225 valign=top style='width:168.55pt;border:solid
windowtext 1.0pt;border-left:none;padding:0cm 5.4pt 0cm 5.4pt'><p align=center style='text-align:center'><b>Nome utente</b><o:p></o:p></p></td><td width=225 valign=top style='width:168.55pt;border:solid windowtext
:p></o:p></span></p></td><td width=225 valign=top style='width:168.55pt;border-top:none;border-left:none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;padding:0cm 5.4pt 0cm 5.4pt'><p
align=center style='text-align:center'><span lang=IT>[//Target/ADInitialPassword]<o:p></o:p></span></p></td></tr></table><p style='<span style='color:black'><o:p> </o:p></span></p><p
style='<span lang=IT style='color:black'>Per eventuali ulteriori informazioni contattare il SSIT allâ€™indirizzo
[email protected].</span><span lang=IT><o:p></o:p></span></p></div></body>
Then I exported this template to the FIM Portal server, in the "Email Template" administration section on the Portal.
Where must I put the image to allow FIM to link it? Which attribute have I to modify with the correct path (src?)? And how?
Can you provide me some examples of the correct form of the path attribute?
Thank u very much.
Francesca

The problem with using "cid" for embedded images is that the email message needs to be formatted differently. You don't have control over the header, mime type and other aspects that need to be defined to include and reference a "cid image" in the message
body.
First, the message header will need to have the following fields:
From: [email protected]
To: [email protected]
Subject: Test example
Mime-Version: 1.0
Content-Type: multipart/related; boundary="boundary-name"; type="text/html"
The "boundary" is what separates the content of the message to form the "multipart/related" pieces.
The message body then has boundary markers and additional content headers to define the individual pieces:
--boundary-name
Content-Type: text/html; charset="US-ASCII"
This is an HTML document, which contains a URI
referencing a resource in another body part, for example
through a statement such as:
<img src="cid:myImage" ALT="Big Smiles">
--boundary-name
Content-Location: CID:blahblah ; this header is not used
Content-ID: <myImage>
Content-Type: image/jpeg
Content-Transfer-Encoding: BASE64
/9j/4AAQSkZJRgABAQEASABIAAD/4QJQRXhpZgAATU0AKgAAAAgACgEPAAIAAAAUAAAAhgEQAAIA
AAAJAAAAmgEaAAUAAAABAAAApAEbAAUAAAABAAAArAEoAAMAAAABAAIAAAExAAIAAAASAAAAtAEy
AAIAAAAUAAAAxgITAAMAAAABAAEAAIdpAAQAAAABAAAA2sSlAAcAAAAQAAAB/gAAAg5TYW1zdW5n
IEVsZWN0cm9uaWNzAFNHSC1BODY3AAAAAABIAAAAAQAAAEgAAAABUGFpbnQuTkVUIHYzLjUuMTAA
MjAxMjowODoxMiAyMzoxODoyOAAAEYgiAAMAAAABAAIAAJAAAAcAAAAEMDIyMJADAAIAAAAUAAAB
rJAEAAIAAAAUAAABwJEBAAcAAAAEAQIDAJIBAAoAAAABAAAB1JIHAAMAAAABAAEAAKAAAAcAAAAE
MDEwMKABAAMAAAABAAEAAKACAAQAAAABAAAGAKADAAQAAAABAAAIAKAFAAQAAAABAAAB3KMAAAcA
AAABAwAAAKMBAAcAAAABAQAAAKQBAAMAAAABAAEAAKQCAAMAAAABAAAAAKQDAAMAAAABAAEAAAAA
AAAyMDEyOjA4OjEyIDE0OjU3OjI1ADIwMTI6MDg6MTIgMTQ6NTc6MjUAAAAMAAAABAAAAgABAAIA
AAAEUjk4AAACAAcAAAAEMDEwMAAAAAAAAAAAUHJpbnRJTQAwMzAwAAAAAAADARoABQAAAAEAAAI4
ARsABQAAAAEAAAJAASgAAwAAAAEAAgAAAAAAAAAAAEgAAAABAAAASAAAAAH/2wBDAAIBAQIBAQIC
AgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/
2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwM
DAwMDAwMDAwMDAz/wAARCAgABgADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQF
BgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS
0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4
eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi
4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREA
AgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl
8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImK
kpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP0
9fb3+Pn6/9oADAMBAAIRAxEAPwD6dmiZmyF4HNOjXygMkc1NjyhjPIppjDA+9em6e9jzIK2ok0wI
64B/SoIozLGSDUgG75WGMcfWmyMI4yFOAKzUdLNlOnzatEaqCSC3K9P/AK1SMx8oBRkGq6oZJeMA
GraR+ZsUHocmsqsLtN6mlNq1oljTrJlAz610Ok6eEkDk9BVXTbQNGuDyDWo8nkRba2pUbxvMxquP
Ly2KeuSrgqOoqrpSmVSah1GbzpDjPWrVo4t7Pd6CrdJuJlCCg0UtaultYmDcEVxepkSuWxkGtbxX
qX2mbaD096xWQFQcipkr7GzjdNSIjH5oHJAHt1pFgXf/AFNSiMLEcdetMjYouM8miEHF6HLJJpLY
bLhOhxnvRDaoVJGeaiklJPpinpMIIx3xWsoy0VzOnGCmAgRHYcHjNWra2MpA7VT2GeTeFxitrw/Z
GYgH8aHDoHKnLa5t6PYqI0J5A/KofEd0udqdBWxGEtbQj+L6Vx3ii9MDMQe/rTS5LWY5wlpZGTq8
ytMSRjiodPhDtuHaq8lz9qJx1NX7W3WCHryazSlN6nTOMIU7ou2x/dk9cdqcg8wgelRo3lxD1NTx
ncoA496rks7nIrShykkbEIV6k1B5SwvuPrUvO3AbJqrdXW2M57VsptbkypR08jK8TSi7iYEfNyAa
5m2VpmKjr/KtjU7oMWO6qPh2Atcu7D5TwD71pH4TjnBOtfqUrmI22QRiremSB0HoO1WNXtlaI560
3R1W3iIKne3qKh8rTTNo03TmmWZJDhQh5zznrj296bfBvIBzz+vFTRhXc7sgiq08zSTf7PaiKSXK
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
YnHSuNyqdDtVGErx
--boundary-name--
The HTML references the embedded content-id via the special "cid" URI. This is the same method used for email attachments. Using the "cid" allows an attachment to be rendered as content in the body of the email.
Since this would already require you to know the underlying mime type of the image, you already need to have the image data converted to Base64 encoding, and you don't have any control over the headers of an email template in FIM... you would need to write
your own email activity and not use the out-of-the-box FIM activities. The other method of getting an email to embed an image is to use the special "data:mime-type" URI in the src attribute of an img tag:
The same image shown above can be placed inline like so:
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/4QJQRXhpZgAATU0AKgAAAAgACgEPAAIAAAAUAAAAhgEQAAIA
AAAJAAAAmgEaAAUAAAABAAAApAEbAAUAAAABAAAArAEoAAMAAAABAAIAAAExAAIAAAASAAAAtAEy
AAIAAAAUAAAAxgITAAMAAAABAAEAAIdpAAQAAAABAAAA2sSlAAcAAAAQAAAB/gAAAg5TYW1zdW5n
IEVsZWN0cm9uaWNzAFNHSC1BODY3AAAAAABIAAAAAQAAAEgAAAABUGFpbnQuTkVUIHYzLjUuMTAA
MjAxMjowODoxMiAyMzoxODoyOAAAEYgiAAMAAAABAAIAAJAAAAcAAAAEMDIyMJADAAIAAAAUAAAB
rJAEAAIAAAAUAAABwJEBAAcAAAAEAQIDAJIBAAoAAAABAAAB1JIHAAMAAAABAAEAAKAAAAcAAAAE
MDEwMKABAAMAAAABAAEAAKACAAQAAAABAAAGAKADAAQAAAABAAAIAKAFAAQAAAABAAAB3KMAAAcA
AAABAwAAAKMBAAcAAAABAQAAAKQBAAMAAAABAAEAAKQCAAMAAAABAAAAAKQDAAMAAAABAAEAAAAA
AAAyMDEyOjA4OjEyIDE0OjU3OjI1ADIwMTI6MDg6MTIgMTQ6NTc6MjUAAAAMAAAABAAAAgABAAIA
AAAEUjk4AAACAAcAAAAEMDEwMAAAAAAAAAAAUHJpbnRJTQAwMzAwAAAAAAADARoABQAAAAEAAAI4
ARsABQAAAAEAAAJAASgAAwAAAAEAAgAAAAAAAAAAAEgAAAABAAAASAAAAAH/2wBDAAIBAQIBAQIC
AgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/
2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwM
DAwMDAwMDAwMDAz/wAARCAgABgADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQF
BgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS
0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4
eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi
4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREA
AgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl
8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImK
kpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP0
9fb3+Pn6/9oADAMBAAIRAxEAPwD6dmiZmyF4HNOjXygMkc1NjyhjPIppjDA+9em6e9jzIK2ok0wI
64B/SoIozLGSDUgG75WGMcfWmyMI4yFOAKzUdLNlOnzatEaqCSC3K9P/AK1SMx8oBRkGq6oZJeMA
GraR+ZsUHocmsqsLtN6mlNq1oljTrJlAz610Ok6eEkDk9BVXTbQNGuDyDWo8nkRba2pUbxvMxquP
Ly2KeuSrgqOoqrpSmVSah1GbzpDjPWrVo4t7Pd6CrdJuJlCCg0UtaultYmDcEVxepkSuWxkGtbxX
qX2mbaD096xWQFQcipkr7GzjdNSIjH5oHJAHt1pFgXf/AFNSiMLEcdetMjYouM8miEHF6HLJJpLY
bLhOhxnvRDaoVJGeaiklJPpinpMIIx3xWsoy0VzOnGCmAgRHYcHjNWra2MpA7VT2GeTeFxitrw/Z
GYgH8aHDoHKnLa5t6PYqI0J5A/KofEd0udqdBWxGEtbQj+L6Vx3ii9MDMQe/rTS5LWY5wlpZGTq8
ytMSRjiodPhDtuHaq8lz9qJx1NX7W3WCHryazSlN6nTOMIU7ou2x/dk9cdqcg8wgelRo3lxD1NTx
ncoA496rks7nIrShykkbEIV6k1B5SwvuPrUvO3AbJqrdXW2M57VsptbkypR08jK8TSi7iYEfNyAa
5m2VpmKjr/KtjU7oMWO6qPh2Atcu7D5TwD71pH4TjnBOtfqUrmI22QRiremSB0HoO1WNXtlaI560
3R1W3iIKne3qKh8rTTNo03TmmWZJDhQh5zznrj296bfBvIBzz+vFTRhXc7sgiq08zSTf7PaiKSXK
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
YnHSuNyqdDtVGErx" alt="Big Smile" />
This method is mostly supported by most of the common email clients, including Outlook.
Hope this better explains an alternate solution,

Copying a table with rollover images & links

Need help...
Using Dreamweaver CS4.
I have a table with rollover images and links from those rollovers"
I now want to copy and paste the table into other pages, but when I do, my links are broken and the rollovers don't work.
I have my Site Def preferences set to "Links relative to: Document"
Is there an easy way to copy & paste a table with rollover graphics and links?
I've tried dragging the table from the page with the working links onto the different page. The graphics show up, but the second state of the rollovers soesn't show up, and I get some weird link error:
Can anyone help?

<!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>Phyllis Bramson</title>
<style type="text/css">

</style>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script type="text/javascript">

</script>
<link href="styles.css" rel="stylesheet" type="text/css" />
<meta name="Keywords" content="Bramson, artist, Chicago, painter" />
<meta name="Description" content="Phyllis Bramson is an established Chicago painter and educator." />
</head>
<body onload="MM_preloadImages('common_graphics/menu_paintings1990_rollwhite.gif','common_graph ics/menu_paintings2000_rollwhite.gif','common_graphics/menu_paintings1980_rollwhite.gif',' common_graphics/menu_paintings1970_rollwhite.gif','common_graphics/menu_worksonpaper2000_r ollwhite.gif','common_graphics/menu_worksonpaper1990_rollwhite.gif','common_graphics/menu_ worksonpaper1980_rollwhite.gif','common_graphics/menu_worksonpaper1970_rollwhite.gif','com mon_graphics/menu_scrolldrawings_rollwhite.gif','common_graphics/menu_statement_rollwhite. gif','common_graphics/menu_resume_rollwhite.gif','common_graphics/menu_collections_rollwhi te.gif','common_graphics/menu_exhibitionsnews_rollwhite.gif','common_graphics/menu_links_r ollwhite.gif')">
<table width="900" border="0" cellpadding="0" cellspacing="0">
<tr>
    <td bgcolor="#666699" scope="col"> </td>
    <td height="30" scope="col"><img src="common_graphics/mast_namebanner.gif" alt="" width="740" height="36" border="0" usemap="#Map2Map2" />
      <map name="Map2Map2" id="Map2Map2">
        <area shape="rect" coords="562,8,719,32" href="mailto:[email protected]" target="_blank" alt="email" />
    </map></td>
</tr>
<tr>
    <td width="160" valign="top" bgcolor="#666699" scope="col"><table width="190" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td valign="top" bgcolor="#666699" scope="col"><img src="common_graphics/menu_paintingssculpture_rollnorm.gif" alt="" width="190" height="34" border="0" /></td>
      </tr>
      <tr>
        <td valign="top" bgcolor="#666699" scope="col"><a href="/paintings_sculpture/paintings_2000/paintings_2000.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image22','','common_graphics/menu_paintings2000_rollwhite.gif' ,1)"><img src="common_graphics/menu_paintings2000_rollnorm.gif" alt="" name="Image22" width="190" height="20" border="0" id="Image22" /></a></td>
      </tr>
      <tr>
        <td valign="top" bgcolor="#666699" scope="col"><a href="/paintings_sculpture/paintings_1990/paintings_1990.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image21','','common_graphics/menu_paintings1990_rollwhite.gif' ,1)"><img src="common_graphics/menu_paintings1990_rollnorm.gif" alt="" name="Image21" width="190" height="21" border="0" id="Image21" /></a></td>
      </tr>
      <tr>
        <td valign="top" bgcolor="#666699" scope="col"><a href="/paintings_sculpture/paintings_1980/paintings_1980.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image20','','common_graphics/menu_paintings1980_rollwhite.gif' ,1)"><img src="common_graphics/menu_paintings1980_rollnorm.gif" alt="" name="Image20" width="190" height="21" border="0" id="Image20" /></a></td>
      </tr>
      <tr>
        <td valign="top" bgcolor="#666699" scope="col"><a href="paintings_sculpture/paintings_1970/paintings_1970.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image23','','common_graphics/menu_paintings1970_rollwhite.gif' ,1)"><img src="common_graphics/menu_paintings1970_rollnorm.gif" alt="" name="Image23" width="190" height="24" border="0" id="Image23" /></a></td>
      </tr>
      <tr>
        <td valign="top" bgcolor="#666699" scope="col"><img src="common_graphics/menu_worksonpaper_rollnorm.gif" alt="" width="190" height="28" border="0" /></td>
      </tr>
      <tr>
        <td valign="top" bgcolor="#666699" scope="col"><a href="/works_on_paper/works_on_paper_2000/works_on_paper_2000.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image24','','common_graphics/menu_worksonpaper2000_rollwhite.g if',1)"><img src="common_graphics/menu_worksonpaper2000_rollnorm.gif" alt="" name="Image24" width="190" height="19" border="0" id="Image24" /></a></td>
      </tr>
      <tr>
        <td valign="top" bgcolor="#666699" scope="col"><a href="/works_on_paper/works_on_paper_1990/works_on_paper_1990.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image25','','common_graphics/menu_worksonpaper1990_rollwhite.g if',1)"><img src="common_graphics/menu_worksonpaper1990_rollnorm.gif" alt="" name="Image25" width="190" height="22" border="0" id="Image25" /></a></td>
      </tr>
      <tr>
        <td valign="top" bgcolor="#666699" scope="col"><a href="/works_on_paper/works_on_paper_1980/works_on_paper_1980.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image26','','common_graphics/menu_worksonpaper1980_rollwhite.g if',1)"><img src="common_graphics/menu_worksonpaper1980_rollnorm.gif" alt="" name="Image26" width="190" height="21" border="0" id="Image26" /></a></td>
      </tr>
      <tr>
        <td valign="top" bgcolor="#666699" scope="col"><a href="/works_on_paper/works_on_paper_1970/works_on_paper_1970.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image27','','common_graphics/menu_worksonpaper1970_rollwhite.g if',1)"><img src="common_graphics/menu_worksonpaper1970_rollnorm.gif" alt="" name="Image27" width="190" height="30" border="0" id="Image27" /></a></td>
      </tr>
      <tr>
        <td valign="top" bgcolor="#666699" scope="col"><a href="scroll_drawings/scroll_drawings.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image28','','common_graphics/menu_scrolldrawings_rollwhite.gif ',1)"><img src="common_graphics/menu_scrolldrawings_rollnorm.gif" alt="" name="Image28" width="190" height="41" border="0" id="Image28" /></a></td>
      </tr>
      <tr>
        <td valign="top" bgcolor="#666699" scope="col"><a href="statement/statement.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image29','','common_graphics/menu_statement_rollwhite.gif',1)" ><img src="common_graphics/menu_statement_rollnorm.gif" alt="" name="Image29" width="190" height="43" border="0" id="Image29" /></a></td>
      </tr>
      <tr>
        <td valign="top" bgcolor="#666699" scope="col"><a href="resume/resume1.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image30','','common_graphics/menu_resume_rollwhite.gif',1)"><i mg src="common_graphics/menu_resume_rollnorm.gif" alt="" name="Image30" width="190" height="41" border="0" id="Image30" /></a></td>
      </tr>
      <tr>
        <td valign="top" bgcolor="#666699" scope="col"><a href="collections/collections.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image31','','common_graphics/menu_collections_rollwhite.gif',1 )"><img src="common_graphics/menu_collections_rollnorm.gif" alt="" name="Image31" width="190" height="42" border="0" id="Image31" /></a></td>
      </tr>
      <tr>
        <td valign="top" bgcolor="#666699" scope="col"><a href="exhibitions_news/exhibitions_news.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image32','','common_graphics/menu_exhibitionsnews_rollwhite.gi f',1)"><img src="common_graphics/menu_exhibitionsnews_rollnorm.gif" alt="" name="Image32" width="190" height="42" border="0" id="Image32" /></a></td>
      </tr>
      <tr>
        <td height="42" valign="top" bgcolor="#666699" scope="col"><a href="links/links.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image33','','common_graphics/menu_links_rollwhite.gif',1)"><im g src="common_graphics/menu_links_rollnorm.gif" alt="" name="Image33" width="190" height="42" border="0" id="Image33" /></a></td>
      </tr>
    </table>      <p> </p></td>
    <td align="left" valign="top"><table border="0" align="left" cellpadding="0" cellspacing="0">
      <tr>
        <td width="30" height="97" scope="col"> </td>
        <td width="330" scope="col"> </td>
        <td width="20" scope="col"> </td>
        <td scope="col"> </td>
      </tr>
      <tr>
        <td scope="col"> </td>
        <td scope="col"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="400" height="400" id="FlashID" title="slideshow">
          <param name="movie" value="home/homepage.swf" />
          <param name="quality" value="high" />
          <param name="wmode" value="opaque" />
          <param name="swfversion" value="8.0.35.0" />
          
          <param name="expressinstall" value="Scripts/expressInstall.swf" />
          
          
          <object type="application/x-shockwave-flash" data="home/homepage.swf" width="400" height="400">
            
            <param name="quality" value="high" />
            <param name="wmode" value="opaque" />
            <param name="swfversion" value="8.0.35.0" />
            <param name="expressinstall" value="Scripts/expressInstall.swf" />
            
            <div>
              <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
              <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
            </div>
            
          </object>
          
        </object></td>
        <td scope="col"> </td>
        <td valign="bottom" scope="col"><img src="home/homepage_quote.gif" alt="Quote" width="282" height="192" border="0" /></td>
      </tr>
    </table></td>
</tr>
</table>
<map name="Map2Map" id="Map2Map">
<area shape="rect" coords="562,26,719,50" href="mailto:[email protected]" target="_blank" alt="email" />
</map>
<map name="Map2" id="Map2">
<area shape="rect" coords="562,26,719,50" href="mailto:[email protected]" target="_blank" alt="email" />
</map>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-12139148-3");
pageTracker._trackPageview();
} catch(err) {}
swfobject.registerObject("FlashID");
</script>
</body>
</html>

Help with positioning images

Hi! So, I am new to DreamWeaver and need assistance. I am working on using AP Divs to position images. I place them where I want via the Design tab and then when I preview it in IE 7 it is in a completely different place. Up until this point, I have just made the adjustments by flipping back and forth between my browser and DW Design display and using margins. You can see I did this for my sidebar links (Home, Overview etc.). Even though on the design screen it looks like I am overlapping my header, when I go out to IE, it looks fine. However, for this graphic organizer that I am working on, it will be too difficult. I will post screen shots of what I am talking about below. Can anyone tell me why this is happening and how to get it stopped? I have never had problems with this before when I have done websites. Do you think I have something wrong in my HTML code or CSS? As you can tell, I am a beginner. Any help would be appreciated! Also, I have a quesiton about the my links in my sidebar. Does anyone know how to put more space in between the words vertically (you can see the links in my second pic below)? Thanks!

How to Get Help Quickly
http://forums.adobe.com/thread/470404
HTML & CSS Tutorials - http://w3schools.com/
Code Validation Tools
CSS - http://jigsaw.w3.org/css-validator/
HTML - http://validator.w3.org/
APDivs as a primary layout method seldom works well. Here is why:
http://apptools.com/examples/pagelayout101.php
Learn CSS Positioning in 10 Steps -
http://www.barelyfitz.com/screencast/html-training/css/positioning/
Use CSS line-height, margins and padding to add space between headings, paragraphs or list items.
Related Link:
CSS Box model
http://css-tricks.com/the-css-box-model/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Troubles with linking images

hi guys, I would need a help with making a link. I positioned a new div tag, insert an image into it and now I need to link this image (the div tag and image have the same size) but when I link it in a "Property" panel DW moves the image a few tens of pixels to the right from its position. moreover the link is as if only at the bottom of the image - when I go over the image the pointer to link doesn't show up, only at the bottom of the image. I need the whole image to be active for linking. can you help me in some way? thanks

Do it in code view. Just wrap your image in an anchor tag (see below)
<a href="yourLink.html" style="display: block;">
<img src="blah.jpg" width="150" height="150" border="0" alt="An Image" />
</a>

Div content, inline images, contain scroll methods

MacPro, DW CS6
Swap Image function
Using inline image row, responsive divs, as secondary navigation (Back-Home-Next text navigation in div above) for swap image pages. I would like to contain the div to the div container width, but avoid the stacking on down size to notePad, then mobile. Do not want to use scrollbars, but would like to emulate slideshow type of function, to allow nav images to move left or right as needed by viewer, with remainder hidden until appearance is needed.
Although I could use PowerPoint, Bridge or easyRotator, I would prefer to use pages as I've coded as I intend to use throughout site for art presentations.
View on server at: http://www.satgraphics.com/SR-71/pages/gallery1_pg1.htm
Thanks in advance,
Joe Satterwhite
SatGraphics.com
ScreamingEagles.com

I require different (text) information in its own div to display with each image, and have created a different page for each, to enable navigation through entire series sequentially.
IMO, that's a very clumsy approach to gallery presentation. You could just as easily create one page for each gallery using jQuery and Fancybox with inline content. To illustrate my point, copy & paste this code into a new, blank document. Save & preview in browsers.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5, with Fancybox2 with Divisions</title>

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

<link href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.css" rel="stylesheet" media="screen">
<script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.pack.js"></script>
<style>
/**this styles thumbnail container**/
#thumbs p {
    float: left;
    width: 180px;
    margin: 10px;
    padding: 10px;
    text-align: center;
    border: 1px solid silver;
    /**optional rounded borders**/
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
/**use same size thumbnail images throughout**/
#thumbs img {
    width: 160px; /**adjust width to thumbnail**/
    height: 120px; /**adjust height to thumbnail**/
    opacity: 0.75;
#thumbs img:hover { opacity: 1.0 }
/**float clearing**/
#thumbs:after {
    content: "";
    clear: left;
    display: block;
/**content**/
#detail-01, #detail-02, #detail-03 {
    display:none;
img {max-width:100%; margin:0 auto; display:block}
</style>
</head>
<body>
<h1><a href="http://fancyapps.com/fancybox/">Fancybox2 Gallery</a> with images & divs</h1>
<h2>Details are hidden until thumbnails are clicked.</h2>

<div id="thumbs">

<p><a class="inline" data-fancybox-group="gallery" href="#detail-01"><img src="http://placehold.it/160x120&text=THUMBNAIL 01" alt="Thumbnail 01" />
</a></p>

<div id="detail-01">
<img src="http://placehold.it/500x320&text=FULL SIZE IMAGE 01"><h3>Heading 3</h3>
<p>Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
</div>

<p><a class="inline" data-fancybox-group="gallery" href="#detail-02"><img src="http://placehold.it/160x120&text=THUMBNAIL 02" alt="Thumbnail 01" />
</a></p>

<div id="detail-02">
<img src="http://placehold.it/500x320&text=FULL SIZE IMAGE 02"><h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
</div>

<p><a class="inline" data-fancybox-group="gallery" href="#detail-03"><img src="http://placehold.it/160x120&text=THUMBNAIL 03" alt="Thumbnail 01" />
</a></p>

<div id="detail-03">
<img src="http://placehold.it/500x320&text=FULL SIZE IMAGE 03"><h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
</div>
</div>

<script>
$(document).ready(function() {
$("a.inline").fancybox({
'transitionIn'    :    'elastic',
'transitionOut'    :    'elastic',
'speedIn'        :    600,
'speedOut'        :    400,
'autoScale'            : true,
'overlayOpacity'    : 0.8,
'overlayColor'    : '#505050'
</script>
</body>
</html>
Nancy O.

Auto slideshow with progressive image load

Hello everyone,
Does anyone know of a good autoplay slideshow script that
starts with the
first image on page load and then downloads the additional
images when
called? In other words, if there are 20 images in the
slideshow, it doesn't
load all 20 images before displaying the first.
I have just a couple of specific requirements.
I don't need any controls (pause, forward, etc) on it.
Most of the javascript slideshows I've looked at in Google or
have in my
snippet list have the image name hardcoded in the script.
Image1.jpg, image2.jpg, etc, which won't work.
I'll be feeding the images dynamically depending on the
category the user
chooses and the image names are variable.
I'm currently using javascript that automatically shows and
hides divs with
the same class name by changing the display style from none
to block and
back to none as it loops through them.
This works well as I can dynamically write as many divs as
needed by looping
through all the items in a category.
But alas, this one still doesn't start to run until all the
images are
downloaded.
You can see it here:
http://www.onelongfellowsquare.com/
There's actually 3 "slideshows", stacked one on top of the
next, using this
in the "Featured" section.
Thank you for any help or ideas.
Take care,
Tim

Thanks, Jeff.
That's the functionality I was looking for.
I just need to figure out the best way to dynamically fill
the array with
image names from a database.
Take care,
Tim
"Jeff" <[email protected]> wrote in message
news:[email protected]...
> <head>
> <script language="JavaScript1.1">
> 
> </script>
> </head>
>
> <body>
> <a href="javascript:gotoshow()"><img
src="image1.JPG" alt="" name="slide"
> width="400" height="271" border=0
style="filter:blendTrans(duration=3)">
>
> <script language="JavaScript1.1">
> 
> </script>
> </body>
>
> Jeff
>
>
>
> ----- Original Message -----
> From: "TC2112" <[email protected]>
> Newsgroups: macromedia.dreamweaver
> Sent: Saturday, January 31, 2009 7:04 PM
> Subject: Auto slideshow with progressive image load
>
>
>> Hello everyone,
>>
>> Does anyone know of a good autoplay slideshow script
that starts with the
>> first image on page load and then downloads the
additional images when
>> called? In other words, if there are 20 images in
the slideshow, it
>> doesn't load all 20 images before displaying the
first.
>>
>> I have just a couple of specific requirements.
>> I don't need any controls (pause, forward, etc) on
it.
>> Most of the javascript slideshows I've looked at in
Google or have in my
>> snippet list have the image name hardcoded in the
script.
>> Image1.jpg, image2.jpg, etc, which won't work.
>> I'll be feeding the images dynamically depending on
the category the user
>> chooses and the image names are variable.
>>
>>
>> I'm currently using javascript that automatically
shows and hides divs
>> with the same class name by changing the display
style from none to block
>> and back to none as it loops through them.
>> This works well as I can dynamically write as many
divs as needed by
>> looping through all the items in a category.
>> But alas, this one still doesn't start to run until
all the images are
>> downloaded.
>> You can see it here:
>>
http://www.onelongfellowsquare.com/
>> There's actually 3 "slideshows", stacked one on top
of the next, using
>> this in the "Featured" section.
>>
>> Thank you for any help or ideas.
>>
>>
>> Take care,
>>
>> Tim
>>
>>
>
> "TC2112" <[email protected]> wrote in message
> news:[email protected]...
>> Hello everyone,
>>
>> Does anyone know of a good autoplay slideshow script
that starts with the
>> first image on page load and then downloads the
additional images when
>> called? In other words, if there are 20 images in
the slideshow, it
>> doesn't load all 20 images before displaying the
first.
>>
>> I have just a couple of specific requirements.
>> I don't need any controls (pause, forward, etc) on
it.
>> Most of the javascript slideshows I've looked at in
Google or have in my
>> snippet list have the image name hardcoded in the
script.
>> Image1.jpg, image2.jpg, etc, which won't work.
>> I'll be feeding the images dynamically depending on
the category the user
>> chooses and the image names are variable.
>>
>>
>> I'm currently using javascript that automatically
shows and hides divs
>> with the same class name by changing the display
style from none to block
>> and back to none as it loops through them.
>> This works well as I can dynamically write as many
divs as needed by
>> looping through all the items in a category.
>> But alas, this one still doesn't start to run until
all the images are
>> downloaded.
>> You can see it here:
>>
http://www.onelongfellowsquare.com/
>> There's actually 3 "slideshows", stacked one on top
of the next, using
>> this in the "Featured" section.
>>
>> Thank you for any help or ideas.
>>
>>
>> Take care,
>>
>> Tim
>>
>>
>
>

Div with a image

Similar Messages

Maybe you are looking for