Positioning image with DIV

I have a row with 3 columns. I want the two outsid columns to
contain images that but up against an image to the left and right
respectively. Problem is that Im getting a gap or border between
the image in outside columns and the image (outside of that it
should be butted up against). Long story short Im trying to figure
out how to use css to position them with -1 margins. I remember
seeing something about this but done know the details. Is this a
feasible route to take or is there a better one?
Thanks

www.asciconsulting.com
Ive decided not to use the corner graphics. But that leaves
two other questions. On the page notice the border to the right of
the gradient graphic? That is not supposed to be there and I can't
figure out why it is. Its like a table border showing up or
something. Any ideas?
Also the links I have on the left are supposed to highlight
when hovered over. They are purely css, but once you click on one
it will never highlight again. Even after being refreshed. How can
I fix this? Heres the CSS Code:
.nav1 {
display:block;
font-family: "Copperplate Gothic Light", "Times New Roman";
font-size: 16px;
font-weight: normal;
color: #cccccc;
text-decoration: none;
padding: 5px;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
background-color:#000000;
.nav1 a:link {
display:block;
font-family: "Copperplate Gothic Light", "Times New Roman";
font-size: 16px;
font-weight: normal;
color: #cccccc;
text-decoration: none;
padding: 5px;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
background-color:#000000;
.nav1 a:hover {
display:block;
font-family: "Copperplate Gothic Light", "Times New Roman";
font-size: 16px;
font-weight: bold;
color: #000000;
text-decoration: none;
padding: 5px;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
background-color:#cccccc;
.nav1 a:visited {
display:block;
font-family: "Copperplate Gothic Light", "Times New Roman";
font-size: 16px;
font-weight: normal;
color: #cccccc;
text-decoration: none;
padding: 5px;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
background-color:#000000;
.nav1 a:active {
display:block;
font-family: "Copperplate Gothic Light", "Times New Roman";
font-size: 16px;
font-weight: normal;
color: #cccccc;
text-decoration: none;
padding: 5px;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
background-color:#000000;
Thanks for any ideas...

Similar Messages

Positioning images with css

Hello everybody,
thanx in advance for your help.
Needless 2 say that my question would sound stupid to most of
you, but if it sounded smart I would probably be the one to answer
it and not to make it... It sounds logic, doesn't it?...I apologize
for my reflection and I go straight to the point:
PRESUPPOSAL:
I created a pretty complex web-page design with Photoshop.
It's not just about a logo in the 0% 0% position and some colored
bar on the viewport border but a 800X600 image with lots of
particulars.
ISSUE:
I'd like 2 put it on the html page with CSS.
QUESTIONS:
a)Shall I put the image as a whole?
b)Or shall I sLice it as I'd do if I wanted to use a table to
position it?
If the a) is the correct option, won't the page be to heavy
in terms of kbytes? (As far as I know a sliced image is overally
lighter than an entire one)
If the b) is the correct option, how can I position more than
one picture with css in a html document? (I studied css from a
short Molly Holzshlag's book and she only explains how to position
1 single image)
c)Is it ok to use CSS image-positioning to such an extreme
extent? Should I prefer table-positioning considering my 800X600px
goal? I mean, is there any technical problem I ignore? Is it a
inapropriate use of CSS?
Thank you so very much and enjoy the week!
bye,
Giuseppe, Rome

Let's start by seeing your page, please.
> I created a pretty complex web-page design with
Photoshop. It's not just
> about
> a logo in the 0% 0% position and some colored bar on the
viewport border
> but a
> 800X600 image with lots of particulars.
I'm already worried. This sounds massively heavy....
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"giuseppe craparotta" <[email protected]>
wrote in message
news:[email protected]...
> Hello everybody,
> thanx in advance for your help.
> Needless 2 say that my question would sound stupid to
most of you, but if
> it
> sounded smart I would probably be the one to answer it
and not to make
> it... It
> sounds logic, doesn't it?...I apologize for my
reflection and I go
> straight to
> the point:
>
> PRESUPPOSAL:
> I created a pretty complex web-page design with
Photoshop. It's not just
> about
> a logo in the 0% 0% position and some colored bar on the
viewport border
> but a
> 800X600 image with lots of particulars.
> ISSUE:
> I'd like 2 put it on the html page with CSS.
> QUESTIONS:
> a)Shall I put the image as a whole?
> b)Or shall I sLice it as I'd do if I wanted to use a
table to position it?
> If the a) is the correct option, won't the page be to
heavy in terms of
> kbytes? (As far as I know a sliced image is overally
lighter than an
> entire one)
> If the b) is the correct option, how can I position more
than one picture
> with
> css in a html document? (I studied css from a short
Molly Holzshlag's book
> and
> she only explains how to position 1 single image)
> c)Is it ok to use CSS image-positioning to such an
extreme extent? Should
> I
> prefer table-positioning considering my 800X600px goal?
I mean, is there
> any
> technical problem I ignore? Is it a inapropriate use of
CSS?
>
> Thank you so very much and enjoy the week!
> bye,
> Giuseppe, Rome
>

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

Position images at bottom of div tag?

How do I position images at the bottom of a div tag?
These images are going to be used as links and Im using a
template which will double there size on certain pages, so I cant
use background images.
Please help as I cant believe this isn't possible!
James

I dont understand what you mean by;
'If you do not know the widths, and you want them all to flow
one after
the other, the make another div as their container, and move
the
"position:absolute;right:0px;" styles to the new div'
When I apply a rule for all images in the div tag, the images
all sit on top of one another;
.container img {
position: absolute;
bottom: 0px;
If I set the images individually I can stop them from doing
this;
.container #image1 {
position: absolute;
bottom: 0px;
left: 320px;
The problem however is that this design is for a template.
The images in the template will double in size when the user is on
that page.
If i use a pixel (or a %) value for the left position, then
the left hand side of the image is centered, not the centre of the
image. This means that the space between the images will vary when
one of them enlarges.
This could be solved if there was some way of making the
images sit next to each other, without specifying a position left
value (like when you insert images into a div tag with no rules).
Can this be done?
Alternatively, is there a way of using a position left value
which controlled the position via the center of the image, not the
left side? Then I could use % values and the images would still
look ordered.

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

HTML Textfield Problem with Image Positions/Image Tag img

I am using :
Flash Builder Burito - Flex Hero SDK - Air 2.5 - Flash Player 10.1
Hi,
i have a problem with the normal Textfield.I'm loading html text into it and apply an css stylesheet on it. Everything works fine, but if there is an <img> in the html code, the image is displayed at the wrong position (top left).
It looks like the Problem is only in Air Applications. I tried the exact same code in an normal actionscript project and tested it in the broweser. Here the images are at the right position.
Does anybody else has this problem in Air or knows a solution to this?
Thanks. Laurid
btw: I tried it on Windows 7 and Android with the same problem.

Okay, I think I found the solution myself:
http://www.kirupa.com/forum/showthread.php?t=322233
For AIR content in the application security sandbox, AIR ignores img tags in HTML content in ActionScript TextField objects. This is to prevent possible phishing attacks,
This does not make any sense to me. Can somebody please explain it to me? I can load images with the loader-class and combine it with my html text. The only thing which does not work is that the text is wrapping aroung the images. So why does this prevent phishing attacks?
For me this doesn't make sense at all. It's just annoying that you develop an application in Flash and that it's not working the same way in Adobe Air. Now I have to find a complicated work-around myself. Or does anybody know how I can easily wrap text around images?
Thanks. Laurid

Photoshop sliced layout output are table base, do it can control the position by CSS with div?

Dear all,
I have make some image in Photoshop, and sliced it to html
page, but open it in dreamweaver it show me the table layout that
Photoshop Sliced maked ..
I am wonder, now many web site are integration with CSS, and
I had saw some total using CSS with div maked Web Site, how to
control the sliced image after that Photoshop sliced it?
Any simple example for newbie reference?
And sorry of my poor English.

It seems you have exported the html from photoshop into
Dreamweaver.
This is not the best way to build a page. You should slice up
your images
and then export the images only into a folder. You then build
the page
using these exported images in your table or css layout. You
can place the
images directly into table cells or divs or use them as
background images
via css.
Good CSS tutorials can be found here:
http://www.adobe.com/devnet/dreamweaver/css.html
Nadia
Adobe� Community Expert : Dreamweaver
http://www.DreamweaverResources.com
- CSS Templates|Tutorials
http://www.csstemplates.com.au
http://www.adobe.com/devnet/dreamweaver/css.html
CSS Tutorials for Dreamweaver
> Dear all,
>
> I have make some image in Photoshop, and sliced it to
html page, but open
> it
> in dreamweaver it show me the table layout that
Photoshop Sliced maked ..
>
> I am wonder, now many web site are integration with CSS,
and I had saw
> some
> total using CSS with div maked Web Site, how to control
the sliced image
> after
> that Photoshop sliced it?
>
> Any simple example for newbie reference?
>
> And sorry of my poor English.
>

How to overlay images with tags?

How can I overlay the small image (tag_smallimage) with the large image (tag_largeimage) ?
with HTML is...
<div style="position: absolute; z-index:100"><img src="yourimage1"></div>
<div style="position: absolute; z-index:5000"><img src="yourimage2"></div>
but how it works with tags?
Thank you in advance!

Well first off, your CSS is a little overkill. You don't really need z-index at all since the image you want overlayed on top of the other image comes after the small image in the markup. You can just set position:absolute and it will appear above your image by default. You'd want to use z-index if an element that comes before another element in the markup is required to be layered on top. Also, try to avoid inline styles unless you are doing an email campaign, in which case, inline styles are best practice since email clients rarely adhere to web standards.
I'm assuming you are creating a web app and you've creted the "smallimage" and "largeimage" fields already for your web app. Here's the HTML:
<div class="image-container">
     <div class="small-image">
          {tag_smallimage}
     </div>
     <div class="large-image">
          {tag_largeimage}
     </div>
</div>
And here's some CSS that you can put in your main stylesheet:
.image-container { position: relative; }
.large-image { position: absolute; top: 0; left: 0; }
This should work for you but you might run into problems with the large images running on top of other image groups if you use this in multiple places on one page. What is your goal for these images? A hover effect so that the large image shows when you hover over the small one?

Help with Div Tags

Hello,
I've got 2 flash files in separate div tags. Div 1 is sized 100% x 100% to match the movie, and the other div tag is set at 900px x 700px (again to match the movie). The 1st tag sort of acts as a background to the top layer. This all works great and really happy with the result.
My only problem is when the browser window gets smaller than the top layer a scroll bar appears (this is no problem, i actually don't want the top layer to resize due to text legibility etc.) but what i notice is that when you scroll to view the rest of the top layer, the bottom layer no longer fills the screen, the remainder of the screen is now white, it actually cuts off some of the image from where the window was in it's last position.
this is the site:
http://www.baycreative.co.uk/Test.html
Any suggestions to why this is happening?

Try this tutorial instead. I believe the one you are
following is flawed.
Taking a Fireworks comp to a CSS-based layout in Dreamweaver
http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt1.html
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
==================
"ck64" <[email protected]> wrote in message
news:g17del$r7k$[email protected]..
> Hello all,
> Just started using Dreamweaver and was following a
tutorial about making a
> layout in Photoshop, slicing it, and then importing it
into Dreamweaver.
> Then I
> delete the content portions of the image and add a box
with DIV tags.
>
> Now, the site works just fine when I put only a single
line of
> text/content
> for both FF and IE.
>
> However, once I add a second line, the site becomes a
mess in FF.
>
> I have the site hosted with 2 lines of text in my main
content box here:
>
http://cnorthington.site.io/sitebase.html
>
> Any advice you can offer would be great.
>
> Thanks,
> Chris.
>

Responsive Background Images with Media Queries

Hello,
I'm creating a mobile website in Dreamweaver and would like to use an image which will change with different device widths. I'm using media queries with background images. My problem is that in order for the background images to display, I need to assign a height to the div. When the image is scaled down the height stays static, leaving white space beneath it. There will be content below the image so the white space will push it down and look wrong. Is there a way to use multiple images with media queries keeping the height responsive? Thank you!
@media screen and (max-width: 1024px) {
#mainImage {
          background-image: url(../images/mainImageLarge.jpg);
          background-repeat: no-repeat;
          background-position: center top;
          background-size: 100%;
          height: 272px;
          border-top-width: 3px;
          border-top-style: solid;
          border-top-color: #FFF;
@media only screen and (max-width : 480px) {
#mainImage {
          background-image: url(../images/mainImageMed.jpg);
          background-repeat: no-repeat;
          background-position: center top;
          background-size: 100%;
          height: 107px;
          border-top-width: 3px;
          border-top-style: solid;
          border-top-color: #FFF;
@media only screen and (max-width : 320px) {
          #mainImage img {
          background-image: url(../images/mainImageSmall.jpg);
          background-repeat: no-repeat;
          background-position: center top;
          background-size: 100%;
          height: 150px;
          border-top-width: 3px;
          border-top-style: solid;
          border-top-color: #FFF;

Like this example:
http://alt-web.com/FluidGrid/Fluid-4.html
METHOD:
Insert 2 images -- one for desktops and one for mobile. Assign classes to each image.
<img id="banner" class="desktop" src="desktop_image.jgp" />
<img id="banner" class="mobile" src="mobile_image.jpg"/>
In your CSS, use display:none and display:block to show/hide.
.desktop {
    display:block;
.mobile {
    display:none;
/* Special Rules for mobiles */
@media only screen and (max-width: 480px) {
    .desktop {display:none}
    .mobile {display:block}
Feel free to set your break points however you wish.
Nancy O.

Can you wrap an image with a link in an html email signature?

When I cite a remotely hosted image in an html signature, and try to make that image a link, the link is ignored and the just the image is shown.
e.g.:
<a href="https://www.facebook.com/pages/Ubiquia/146019678805381" target="_blank">
<img style=" position:absolute;
height:30px;
width:30px;
left:172px;
top:157.5px"
src="http://png.findicons.com/files/icons/2779/simple_icons/48/facebook_48_black.png" alt="ubiquia facebook" moz-do-not-send="true"
>
</a>

For each icon that you want to use in your email signature:
locate icon on internet webpage - right-click on the icon and select 'Save Image as'. Save the icon to your computer in a suitable file.
Then in Thunderbird
insert > Image
choose file - locate the saved icon on your computer
click on Link tab and enter the www etc webpage link info
click on OK to insert image with link.
Codewise, where you have the actual icon you would need something stating where the icon is located:
eg
<a href="https://www.facebook.com/pages/Ubiquia/146019678805381" target="_blank">
path to image saved on computer included in within <> </a>

Framing image with transparent background png frame

hi,
i'm trying to find a way to frame images with transparent background png frames...
what i'm doing now is
1-drawing my image on a panel
2-creating a 2nd image using the frame's filename, stretching this 'frame-image' to a size slighlty larger than that of my main image and drawing the 'frame-image'
the problems with this method are:
1-depending on the width of the frame, the frame sometimes hides parts of the image (thick frame), and sometimes there is a gap between the frame and the image (thin frame).
2-if the image file containing the frame is larger than the frame (Ex: The image is 300x300, the frame is centered in this image and is 200x200; as opposed to the image is 200x200 and the frame takes up all the space), when i position the 'frame-image' near the top left corner of the image i want to frame, the frame appears at the wrong place (shifted down and to the right). This is due to the fact that i'm placing the top corner of the created 'frame-image' and not the frame, who is not in the top corner of my 'frame-image'.
Is there a way to do what i'm trying to do???
My ideas (which i don't know how to achieve are)
1-To 'analyse' my transparent background png file and
     1-only keep the frame,
     2-calculate the frame's thickness
OR
2-Let java do the analyzing for me and tell it to frame my image with the frame in the png file
please feel free to ask for more explanations if my description/question is confusing,
thanks.

Have you looked into the Border interface? If what you really want to do
is put a custom border on a component, you may be able to do it this way.
Anyway, here is some code that stacks and centres 2 images. It's not hard to do.
import java.awt.*;
import java.awt.image.*;
import java.io.*;
import java.net.*;
import javax.imageio.*;
import javax.swing.*;
public class Example extends JComponent {
    private BufferedImage backgroundImage;
    private BufferedImage foregroundImage;
    public Example(BufferedImage backgroundImage, BufferedImage foregroundImage) {
        this.backgroundImage = backgroundImage;
        this.foregroundImage = foregroundImage;
    public Dimension getPreferredSize() {
        int w = backgroundImage.getWidth();
        int h = backgroundImage.getHeight();
        return new Dimension(w, h); //assuming this is bigger
    protected void paintComponent(Graphics g) {
        super.paintComponent(g);
        int w = getWidth();
        int h = getHeight();
        //paint both, centred
        int x0 = (w-backgroundImage.getWidth())/2, y0 = (h-backgroundImage.getHeight())/2;
        g.drawImage(backgroundImage, x0, y0, null);
        int x1 = (w-foregroundImage.getWidth())/2, y1 = (h-foregroundImage.getHeight())/2;
        g.drawImage(foregroundImage, x1, y1, null);
    public static void main(String[] args) throws IOException {
        URL url1 = new URL("http://weblogs.java.net/jag/Image54-large.jpeg");
        URL url2 = new URL("http://weblogs.java.net/jag/DukeSaltimbanqueSmall.jpeg");
        JComponent comp = new Example(ImageIO.read(url1), ImageIO.read(url2));
        final JFrame f = new JFrame();
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        f.getContentPane().add(comp);
        f.pack();
        SwingUtilities.invokeLater(new Runnable(){
            public void run() {
                f.setLocationRelativeTo(null);
                f.setVisible(true);
}

Images with Transparency Cause Rendering Bug in Acrobat

Try this at home: Export a file containing an image with transparency to PDF and open it in Acrobat (any platform, any recent version): the page containing the image will have all text rendered in what looks like bold or faux bold, depending on the font. The document looks fine in Preview and printed (even from Acrobat).
Can anyone else reproduce this? I get this behavior consistently.

Hi bdepaepe, I've had a look and I believe I have experienced the error you mean and solved it.
The reason this occurs some of the time, but not always is because the source code is not the same each time, as the adverts change every refresh. The error only happens when two of the < div> tags of class 'banneritem' which are on top of each other have a height of 84px each as opposed to 80px (although even if this is the case the rendering issue doesn't always happen).
The reason that some of the 'banneritem' < div> tags have a height of 84px is because inside them there is an <a> tag which contains an < img> tag, and the <a> tag has not been set to 'display: block;'. <a> tags are inline elements by default, so shouldn't be used to hold block level elements such as images unless the styles for the <a> tag include 'display: block;'.

Rotating Image with Fade Effect

Ok looking to rotate an image with a fade effect; below is a rotating image code.
(Wanting this effect to be transitional and smooth. Transparency? Opacity?)
<script language="JavaScript">

</script>
Any ideas?

Here is the script I finally got working! It would have not came to me without your help guys!
<script>
var pictureWebPartName="Pictures"; // name of the picture library web part
var showThumbnails = true; //otherwise show full sized images
var randomImg = true; //set to true to show in random order
var useCustomLinks = false; //true to use second column as URL for picture clicks
var RotatingPicturesLoopTime = 5000; //2000 = 2 seconds
var imgToImgTransition = 1.0; //2 = 2 seconds
// don't change these
var selectedImg = 0;
var imgCache = [];
var imgTag;
function RotatingPictures()
imgTag = document.getElementById("RotatingImage");
//Find the picture web part and hide it
var Imgs = [];
var x = document.getElementsByTagName("TD"); // find all of the table cells
var LinkList;
var i=0;
for (i=0;i<x.length;i++)
if (x[i].title == pictureWebPartName)
// tables in tables in tables... ah SharePoint!
LinkList = x[i].parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;
// hide the links list web part
LinkList.style.display="none";
break;
if (!LinkList)
document.all("RotatingImageMsg").innerHTML="Web Part '" + pictureWebPartName + "' not found!";
//Copy all of the links from the web part to our array
var links = LinkList.getElementsByTagName("TR") // find all of the rows
var url;
var len;
for (i=0;i<links.length;i++)
//if (links(i).id.match("row")!=null)
if (links[i].childNodes[0].className=="ms-vb2")
len=Imgs.length
Imgs[len]=[]
Imgs[len][0] = links[i].childNodes[0].childNodes[0].href;
if (useCustomLinks)
if (links[i].childNodes[1].childNodes.length>0)
{ Imgs[len][1] = links[i].childNodes[1].childNodes[0].href; }
else
{ Imgs[len][1] = "" }
if (Imgs.length==0)
document.all("RotatingImageMsg").innerHTML="No images found in web part '" + pictureWebPartName + "'!";
for (i = 0; i < Imgs.length; i++)
imgCache[i] = new Image();
imgCache[i].src = Imgs[i][0];
if (useCustomLinks)
imgCache[i].customlink=Imgs[i][1];
RotatingPicturesLoop();
// now show the pictures...
function RotatingPicturesLoop()
if (randomImg)
selectedImg=Math.floor(Math.random()*imgCache.length);
if (document.all){
imgTag.style.filter="blendTrans(duration=" + imgToImgTransition + ")";
imgTag.filters.blendTrans.Apply();
url=imgCache[selectedImg].src
if (useCustomLinks)
{ RotatingImageLnk.href=imgCache[selectedImg].customlink; }
else
{ RotatingImageLnk.href = url; }
if (showThumbnails)
// convert URLs to point to the thumbnails...
// from airshow%20pictures/helicopter.jpg
// to airshow%20pictures/_t/helicopter_jpg.jpg
url = revString(url);
c = url.indexOf(".");
url = url.substring(0,c) + "_" + url.substring(c+1,url.length);
c = url.indexOf("/");
url = url.substring(0,c) + "/t_" + url.substring(c,url.length);
url = revString(url) + ".jpg";
imgTag.src = url;
if (document.all){
imgTag.filters.blendTrans.Play();
selectedImg += 1;
if (selectedImg > (imgCache.length-1)) selectedImg=0;
setTimeout(RotatingPicturesLoop, RotatingPicturesLoopTime);
// utility function revString found here:
// http://www.java2s.com/Code/JavaScript/Language-Basics/PlayingwithStrings.htm
function revString(str) {
var retStr = "";
for (i=str.length - 1 ; i > - 1 ; i--){
retStr += str.substr(i,1);
return retStr;
// add our function to the SharePoint OnLoad event
_spBodyOnLoadFunctionNames.push("RotatingPictures");
</script>

<center>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="VU" height="125" width="160" align="center" valign="middle">
<a name="RotatingImageLnk" id="RotatingImageLnk" alt="click for larger picture">
<img src="/_layouts/images/dot.gif" name="RotatingImage" id="RotatingImage" border=0>
</a>
<span name="RotatingImageMsg" id="RotatingImageMsg"></span>
</td>
</tr>
</table>
</center>
Thanks again guys!

Looking for the most easy way to position images on a page!?

Hi, I'm looking for the most easy way for exact position a lot of PNG images on a web page. Input appreciated!
Thanks!

Basic 1-col layout with 3 evenly spaced boxes:
http://alt-web.com/TEMPLATES/Basic-1-col-fixed.html
CSS Floats and Margins tutorial -
http://alt-web.com/DEMOS/3-CSS-boxes.shtml
Float left & float right images with wrapping text
http://alt-web.com/DEMOS/CSS2-Captions-on-floated-images.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Positioning image with DIV

Similar Messages

Maybe you are looking for