Gif loader for background image

I simply want to run an animated gif while my background image loads for a slideshow.
I've searched the web and this forum for hours and can't get the various bits of code tips (ajax, jquery) to work because I'm a totaly idiot when it comes to code...i've tried cutting and pasting in many different configurations but can't get anything to work properly.
Can someone help me out to get this to work?
I have this slideshow:
http://www.piquecollaborative.com/fox.html
and want an animated gif to run during load of each page
gif is this:
http://www.piquecollaborative.com/images/loading.gif
here is my code for the page(s)
<!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="Matthew Fox Residence by PIQUE architecture, Peter Jahnke, Eric Meglasson" />
<meta name="keywords" content="pique llc, architecture, emerging architects, young architects, northwest, peter jahnke, eric meglasson, keith ballantyne, collective studio, collected design" />
<title>PIQUE: Fox House</title>
<style type="text/css">
.projectpage {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #333;
body,td,th {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #333;
    font-size: 12px;
body {
    background-image: url(images/fox-01.jpg);
    background-repeat: no-repeat;
#title {
    position:absolute;
    width:350px;
    height:65px;
    z-index:1;
    left: 10px;
    top: 10px;
#apDiv1 {
    position:absolute;
    width:108px;
    height:161px;
    z-index:2;
    top: 3px;
    left: 8px;
#apDiv2 {
    position:absolute;
    width:237px;
    height:160px;
    z-index:3;
    left: 118px;
    top: 3px;
    text-align: right;
#text {
    position:absolute;
    width:351px;
    height:194px;
    z-index:4;
    left: 10px;
    top: 90px;
    background-image: url(images/fox-01.jpg);
#project-text {
    position:absolute;
    width:355px;
    height:300px;
    z-index:5;
    top: 288px;
    text-align: justify;
    left: 13px;
#right-arrow {
    position:absolute;
    width:90px;
    height:330px;
    z-index:6;
    left: 915px;
    top: 270px;
</style>
<script type="text/javascript">
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_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
</head>
<body class="projectpage" onload="MM_preloadImages('images/arrow-rt-inv.png')">
<div id="title"><img src="images/fox-title.gif" width="350" height="65" /></div>
<div class="projectpage" id="text">
<div id="apDiv2">Fox House<br />
    central Oregon<br />
    single family residence<br />
    4175 sqft<br />
    2010<br />
    Timberline construction, Elemental engineering </div>
<div id="apDiv1">name:<br />
    location:<br />
    type:<br />
    size:<br />
    year:<br />
    collaborators: </div>
<img src="images/line-dot-small.png" width="361" height="5" /><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<img src="images/line-dot-small.png" width="361" height="5" /> </div>
<div id="project-text">
<p> This home sits on a bluff overlooking rolling sagebrush meadows   in Oregon’s High Desert with views of the Cascade Mountains dominating    the western horizon. The owners, Matthew and Margherita Fox requested   an extremely durable and energy efficient home for their family. The   request for a net zero house necessitated extensive use of photovoltaic   panels, ground source heat-pumps, careful consideration of day   lighting and shading strategies, and a super-insulated structure. </p>
<p>Italian architect and childhood friend Maria Chiara Trevisan   created the original vision for the structure as a gift to the Foxes.    The three masses, originally conceived as parallelepipedo (rectangular   cubes) resting at various angles in the earth, evolved into three   shelled structures clad in stone, a loose reference to the Three   Sisters mountains which dominate the home’s view.</p>
<p>Photos by Nicole Werner, Bob Woodward, Peter Jahnke</p>
</div>
<div id="right-arrow"><a href="fox02.html"><img src="images/arrow-rt.png" alt="" name="Image1" width="48" height="48" border="0" id="Image1" onmouseover="MM_swapImage('Image1','','images/arrow-rt-inv.png',1)" onmouseout="MM_swapImgRestore()" /></a></div>
</body>
</html>
can anyone help me get a leg up on this? Sorry to be such a noob. This is not my trade and i have more respect for you all now than ever before! sorry again,

You might want to reconsider the use of absolutely positioned div's for layout purposes...
it often leads to big difficulties.http://www.apptools.com/examples/pagelayout101.php
Regarding your loading gif, try defining a container for the picture
and position your loading gif as a centered non-repeating background for container
and insert your image in the container.

Similar Messages

How to load a background Image on a JDialog object

Hi All, Actually i am new to java programing and i am stuck in this problem. I am developing a java application which is dialog based (using JDialog objects) and i want to load a background image on my dialog. I hope this could be done and i really appreciate your help because i must deliver this project and this is a user interface requirement.

Try something along the lines of this: Create a new class called BackgroundImagePanel and have it extend JPanel.
Have an attribute in the class for your image, and a method to set it.
Override isOpaque() to return true.
Override the paintComponenet method as such:
public void paintComponent (Graphics g) {
super.paintComponent(g);
if( image == null ) return;
Icon icon = new ImageIcon(image);
icon.paintIcon(this, g, x, y);
Add this panel to your JDialog and then add other component to this panel.
You might have to tweak this a bit, but it should get you close...
Bill

PNG fix for background images?

I am putting together an artsy-fartsy design with lots of
stylish wavy lines, fine gradients and dropdown shadow effects and
was wondering if there was a PNG fix for background images. Most
out there seem only to apply to images included in the html.
Otherwise I can use JPEGs with a bit of the background included
behind them (I hate doing this)...

Hi,
Hmmm. I think you have a great point there. In my opinion, I
think that there is no png fix for background images. Use jpegs
with background. I do the same.
Gaurav
www.gauravchandra.com

Animated gif layered above background image

I have a static background image which is displayed in a JPanel. I need to display animated gifs at certain positions on the base image. For every new frame of the animation, the paint method is called whcih attempts to load the entire base image + all the new animated images which is extremely slow!. It also means the animated gif keeps on getting loaded, and seldom gets beyond the first frame.
Im sure many people have had to do something like this. Is the solution to draw the gifs on the glasspane (or use layered panes), and to have a seperate paint method? or is their a simple approach like setting a special clip area.

thanks for the help...
The size of the background image is approx 400*400 pixels (gif or jpg), and the icons are 25*25, and have between 1 and 6 frames.
Here comes the code... I havent finished with the mediatracker stuff, but youll get the idea Im sure.
public void paint(Graphics g) {
    MediaTracker tracker = new MediaTracker(this);
    tracker.addImage(image,0);
    try {tracker.waitForID(0);}
    catch (InterruptedException e){}
    g.drawImage(image, 0, 0, this); //draw background image (approx 400*400 pixels)
    int ICON_ID = -1;
    Image img;
    //draw all the icons...
    //all icons have between 1 and 6 frames. 25*25 pixels.
    for (int i = 0; i < icon_IDs.size(); i++) {
      try {
        ICON_ID = new Integer(icon_IDs.elementAt(i).toString()).intValue();
        Point p = dm.getIconPosition(ICON_ID);
        if (isAlarm(ICON_ID)) {        //ITS AN ALARM - use animated gif
          img = getAlarmImage(ICON_ID);
        else                          //NORMAL ICON - no animation
          img = DataDefinition.getImageIcon(dm.getIconType(ICON_ID)).getImage();
        tracker.addImage(img,0);
        try {tracker.waitForID(0);}
        catch (InterruptedException e){}
        int width = DataDefinition.getSize(dm.getIconType(ICON_ID)).width;
        int height = DataDefinition.getSize(dm.getIconType(ICON_ID)).height;
        g.setClip(p.x, p.y, p.x+width, p.y+height);
        g.drawImage(img, p.x, p.y, p.x+width, p.y+height, 0,0,img.getWidth(this),img.getHeight(this),this);
      catch (SQLException sqle) {
        System.out.println("Could not find position of icon : " + ICON_ID);
}

CSS for background image not transfering from template to new page

I have a gradient .gif in my templates which suddenly no longer transfers from the template to a new page created from the template. Everything else about the template transfers. I'm using Dreamweaver CS5 on a Mac running OS 10.6. I've pasted the CSS from the template and the new page below. I've tried the usual voodoo--restart program, restart computer, repair permissions, delete preference file, delete personal configuration file.
CSS from Template:
.container {
    background-color: #ececec;
    background-image: url(../images/faux_column.png);
    background-repeat: repeat-y;
    height: 650px;
    width: 650px;
CSS from page created from Template looks to be the same, but is greyed out in the code, and the background-image entry is not present in the CSS styles inspector:
.container {
    background-color: #ececec;
    background-image: url(../images/faux_column.png);
    background-repeat: repeat-y;
    height: 650px;
    width: 650px;
Any suggestions greatly appreciated.

Unfortunately, I don't yet have a site where I can post the page. I'm new to this, and doing everything locally for now.
After careful rechecking, I found that the links for the template and the child were not the same, as you suspected. So I carefully changed the links to site root relative, which worked for the background CSS in my test image. I then did the same for all of the links to pages on my site, and checked that all were OK with Link Checker in DW. I guess that was a mistake, because now most of them don't work when tested in Firefox--I get the message File not found. Must be doing something wrong.

2 out of 6 pages not loading browser background image

Does anyone know why out of 6 pages on my website, only 2 of them are not loading the choosen browser background image? All other pages load them in when uploaded to the site online. They appear to be correct in iWeb before publishing.
Once they are published, it is just white. If I select a color instead of the image, the color displays. Thoughts?
All the best
iMac G5 20 Mac OS X (10.3.9)

One more question. I know that when you publish your
site to a non .mac acct, the podcasting code needs to
be changed. Can someone help me out with that? You
click the subsribe button and it launches iTunes, but
then it errors out. Thoughts?
Your RSS URL is invalid: http://www.onetvshow.com/ONE/our%20podcast/rss.xml
www.onetvshow.com is not listed with WHOIS.
Does anyone know of a free/cheap program I can use to
edit some of the code. I need to insert some form
mail code and then also for the podcast code edits.
You are asking the wrong guy if it repetitive and on going basis, I say AppleScript

How to specify relative path for background image in xsl

Hi,
I am generating a PDF from Apcahe FOP. I have an xsl for that, in the xsl fo:block I am displaying a background image. When the image path is absolute like..C:\image\logo.png it works fine. But I want to have the image in my WebContent\images folder and my xsl file is in WebContent\xsls folder. So when I try giving the relative path as ../images/logo.png, the image is not displayed.
Can anyone tell how to do this???
Thanks,
Sanjeev.

I have a fo:block like this :
<fo:block border-style="solid" border-width="0.2pt" text-align="left"
                         background-image="url('http://localhost:8080/Project/images/table_header_center.png')"
                         font-size="8pt" font-weight="bold" color="white" padding-top="1pt"
                         padding-bottom="1pt">
                         <xsl:value-of select="tr/td/span" />
                    </fo:block>In the above code you can see that the the background-image="url('http://localhost:8080/Project/images/table_header_center.png')"
has been given as absolute. The images folder is in my WebContent directory. I want this path to be relative to the context of my application , something like background-image="url('../images/table_header_center.png')".
Thanks.
sanjeev.

Animated GIF as a background image on a C5-00?

Is there any way to get animated GIFs runnig as a background image on a C5-00? At the moment, it just shows a still picture....

Yes, Captivate 7. I'm re-working an old Dreamweaver HTML CBT program to bring it up to today's standards using Captivate. I previously had small cartoon hands pointing to the right or left to click to go to the next or previous slide.The pointing hands are static, but on rollover I had an animated gif of the pointing hand moving in the direction it pointed. I'm certain I can figure out a workaround, just wanted to see if there was a built-in way to have an animation be the 'over' state.

Dynamic URL for background-image

Hi,
When I use the following code, the image gets displayed correctly in the PDF-
      <fo:block border-style="solid" border-width="0.2pt"
               text-align="left" font-size="8pt"
               font-weight="bold" color="white" padding-top="1pt"
               padding-bottom="1pt"
                           background-image="url{'http://localhost:8080/project/images/table_header_center.png'}">
               <xsl:value-of select="tr/td/span" />
               </fo:block>but when I assign the path to a variable like the following-
<xsl:variable name="imgPath"
         select=" 'http://localhost:8080/project/images/table_header_center.png' " />and then use-
<fo:block border-style="solid" border-width="0.2pt"
               text-align="left" font-size="8pt"
               font-weight="bold" color="white" padding-top="1pt"
               padding-bottom="1pt"
                           background-image="url{$imgPath}">
               <xsl:value-of select="tr/td/span" />
               </fo:block>I dont get the image on the PDF. Am I missing something??
Thnxxx.
Sanjeev.

I resolved the issue by passing the context path to the xml.
Thnx for your concerns.

Safest CSS code for background image rotation?

I currently use 4 different images to do rounded corner captions, and it occurred to me that I could just be using one and rotate it, if such a thing is actually possible.
Is it?
The images are actually table cell backgrounds, so it would have to be for background rotation, and it would have to be compatible will all major browsers.

if such a thing is actually possible.
That would require working with CSS transform properties and since they just like the native rounded corner property are CSS3, which is not yet consistently working in all browsers, it is not safe. Of course one might also be able to use jQuery and such, but why complicate the source code? Stick with your images.
Mylenium

Start Disk Full MBP won't load beyond background image

Hello! My start disk was warning me it was approaching 'full' so I went out & bought an external hard drive.. backed up one user (primary) on the hard drive, then logged out so I could log in as the other user to back up that side of the computer's data, & when I logged in there all that loaded was a purple background (not my normal background) No access to any icons, applications, data, magnifying glass, etc.. nothing loaded basically. So I tried to log back in as the original user & ran into the exact same probelm, except from here I can access A SINGLE window of Safari.. it automatically loads just the Safari bar at the top & I can browse the internet still.. but cannot open any content such as youtube or download of course, also cannot open any other applications though it will open garage band's bar, just no files..
I would like to know what I need to do to be able to get in to either profile so I can delete at least enough files or get my computer to at least let me back up that other user so I can do whatever you recommend I need to to get my computer working again. Thanks!

After that, check the S.M.A.R.T. status on your HD: Boot from install disc (insert disc > restart > immediately hold down the c key and keep holding it until you see “Preparing Installation”) > at first screen select the language and click Continue > click on the Utilities Menu in the menubar > select Disk Utility > select your HD in the panel on the left side (the name of the HD’s manufacturer and the model number, usually the top item in the list) > look at the bottom of the main window next to S.M.A.R.T. status and see if it says “Verified” (good) or something more ominous like “Failing.”
If S.M.A.R.T. status is "Verified," run Repair Disk > click Repair Disk at bottom of main window. Run this at least twice, and keep running it until it says “appears ok” twice in a row. If that doesn’t happen,you may need a stronger utility (such as DriveGenius, TechToolPro, DiskWarrior) or if the directory is damaged beyond repair, you may need to reinstall the OS, or you may have a damaged HD which will need to be replaced (repair utilities can only repair the directory structure, not the HD itself). When this is finished, quit Disk Utility, quit the installer, and restart. Once booted normally, go to Applications > Utilities > Disk Utility and run Repair Permissions.

Firefox wont load background image on some sites but internet explore will load the background

i downloaded firefox awhile ago worked perfectly fine then all a sudden it wont load facebook background images the homepage of facebook loads background image but when i log in it wont load background image but when i try internet explorer it loads the background images fine i checked every setting redownloaded everyhing nothing fix's it tho

If images are missing then check that you aren't blocking images from some domains (e,g, sphotos.ak.fbcdn.net).
*Check the permissions for the domain in the current tab in "Tools > Page Info > Permissions"
*Check that images are enabled: Tools > Options > Content: [X] Load images automatically
*Check the exceptions in "Tools > Options > Content: Load Images > Exceptions"
*Check the "Tools > Page Info > Media" tab for blocked images (scroll through all the images with the cursor Down key).
If an image in the list is grayed and there is a check-mark in the box "<i>Block Images from...</i>" then remove that mark to unblock the images from that domain.
Make sure that you do not block third-party images, the permissions.default.images pref should be 1.
*http://kb.mozillazine.org/Images_or_animations_do_not_load
There are also extensions (Tools > Add-ons > Extensions) and security software (firewall, anti-virus) that can block images.
Make sure that you allow pages to choose their colors and that you haven't enabled High Contrast in the Accessibility settings.
*Tools > Options > Content : Fonts & Colors > Colors : [X] "Allow pages to choose their own colors, instead of my selections above"
*http://kb.mozillazine.org/Website_colors_are_wrong
*http://kb.mozillazine.org/Websites_look_wrong

Website background image is not loading in firefox version 22.0

i am working on a website ,with earlier version of firefox(20.0) my website background page was loading properly but when i tried to see my webpage on latest firefox browser it does not load the background image ?

Reload the webpage while bypassing the cache using '''one''' of the following steps:
*Hold down the ''Shift'' key and click the ''Reload'' button with a left click.
OR
*Press ''Ctrl'' + ''F5'' or ''Ctrl'' + ''Shift'' + ''R'' (Windows and Linux)
*Press ''Command'' + ''Shift'' + ''R'' (Mac)
Let us know if this solves the issues you are having.

Background Image file for 7975

What are the file specifications for a custom background image on the Cisco 7975 Ip phone? I mean, the size, resolution, color depth and so on
Thank you in advance

The PNG files for background images must meet the following requirements for proper display on the Cisco Unified IP Phone:
â¢Full size image-320 pixels (width) X 212 pixels (height).
â¢Thumbnail image-80 pixels (width) X 53 pixels (height).
â¢Color palette-Includes up to 16-bit color (65535 colors). You can use more than 16-bit color, but the phone will reduce the color palette to 16-bit before displaying the image. For best results, reduce the color palette of an image to 16-bit when you create a PNG file.
http://www.cisco.com/en/US/docs/voice_ip_comm/cuipph/7975g/7_0/english/administration/guide/7975cst.html#wp1088046

Background image in extended awt.Button doesn't show.

Hi all
I have an applet that has only an awt.Button visible on the page. Because of layout requirements I need to style that button with a background image. I have extended the java.awt.Button like this:
     class ImageButton extends Button {
          public void paint(Graphics g) {
               super.paint(g);
               g.drawImage(getImage(getDocumentBase(), "../img/loadSertificate.jpg"),
                         0, 0, null);
     }and use the extended:
     public void init() {
          mSignButton = new ImageButton();
          mSignButton.setLocation(0, 0);
          Dimension appletSize = this.getSize();
          mSignButton.setSize(appletSize);
          mSignButton.addActionListener(new ActionListener() {
               public void actionPerformed(ActionEvent e) {
                    signSelectedFile();
          this.setLayout(null);
          this.add(mSignButton);
     }Now everiting is ok but when the applet is loaded the background image doesn't show and only a plain gray button is visible. The interesting part is that the image does show after I click somewhere in the browser's window and later on it's always visible as expected.
Below is part from the log from the java console:
basic: Applet started
basic: Told clients applet is started
Loaded image: http://ip:8080/UserManagement/img/loadSertificate.jpg
network: Cache entry found [url: http://ip:8080/UserManagement/img/loadSertificate.jpg, version: null]
network: Connecting http://ip:8080/UserManagement/img/loadSertificate.jpg with proxy=DIRECT
network: Connecting http://ip:8080/UserManagement/img/loadSertificate.jpg with cookie "JSESSIONID=8A0936441BDA3215A10D9798742C4685"
network: CleanupThread used 39850 us
network: ResponseCode for http://ip:8080/UserManagement/img/loadSertificate.jpg : 304
network: Encoding for http://ip:8080/UserManagement/img/loadSertificate.jpg : null
network: Disconnect connection to http://ip:8080/UserManagement/img/loadSertificate.jpg
Loaded image: http://ip:8080/UserManagement/img/loadSertificate.jpgAny suggestions how to fix this issue?!
Edited by: factor5 on Nov 12, 2009 1:27 AM
Edited by: factor5 on Nov 12, 2009 1:28 AM

xmm sry but this was a forgotten repaint() :
          public void paint(Graphics g) {
               // call super's paint method
               super.paint(g);
               g.drawImage(getImage(getDocumentBase(), APPLET_BUTTON_IMAGE_URL),
                         0, 0, null);
               repaint();
          }Now it seems to work fine.
Edited by: factor5 on Nov 12, 2009 1:44 AM

Gif loader for background image

Similar Messages

Maybe you are looking for