SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict longroad's Avatar
    Join Date
    Mar 2004
    Location
    Australia
    Posts
    236
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    New window background color

    Is there a way to specify properties for a new window?
    Eg, I have thumbnail images which open a new window with a larger pic when clicked on.
    Currently Im using target=_blank (wrong as i know this is), but I want to be able to specify the background colour of the new window, as well as put a border around the image, so i assume i will have to use javascript, if this is possible.

    I've been searching but cant really find how to do this.
    I have alot of images so i will need something thats scalable for that (ideally not having to write the same code over and over).
    Any help would be great

  2. #2
    SitePoint Wizard silver trophy someonewhois's Avatar
    Join Date
    Jan 2002
    Location
    Canada
    Posts
    6,364
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As far as I know, if you take the return code of window.open (ie. "newwin = window.open(...)"), you can do anything you can with window. So newwin.style.img='border: 1px black solid;' or newwin.bgcolor='#000000'; etc..

  3. #3
    SitePoint Zealot coothead's Avatar
    Join Date
    Jan 2005
    Location
    Chertsey, London, England
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there longroad,

    check out this working example, it may give you some ideas...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>variable popups</title>
    
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    <base href="http://coothead.homestead.com/files/"/>
    
    <style type="text/css">
    /*<![CDATA[*/
    
    body {
         background:#003;
     }
    div {
         width:60px;
         border:solid 1px #000;
         background:#eef;
    }
     div img {
         width:50px;
         height:50px;
         border:solid 1px #000;
         margin:3px;
    }
    
    /*//]]>*/
    </style>
    
    <script type="text/javascript">
     //<![CDATA[
    
    var mywindow;
    
    function popUp(w,h,image) {
     if(mywindow) {
        mywindow.close()
     }
      w=w+26; /* this is img width plus margin and border values*/
      h=h+26; /* this is img height plus margin and border values*/
    
      var l=(screen.width-w)/2;
      var t=(screen.height-h)/2;
      var features="left="+l+",top="+t+",width="+w+",height="+h;
      
            mywindow=window.open('','',features);
            mywindow.document.write('<html><title>'+image+'<\/title><body style="margin:0px;padding:0px;background:#000">');
            mywindow.document.write ('<img src='+image+ ' style="margin:10px;border:double 3px #f00" >')
            mywindow.document.write ('<\/body><\/html>');
            mywindow.document.close();
            mywindow.focus();
     }
    
    //]]>
    </script>
    
    </head>
    <body>
    
    <div>
    <a href="javascript:void(popUp(400,432,'dog.jpg'))"><img src="dog.jpg"  alt=""/></a>
    <a href="javascript:void(popUp(360,280,'banana.jpg'))"><img src="banana.jpg"  alt=""/></a>
    <a href="javascript:void(popUp(200,200,'aaa.jpg'))"><img src="aaa.jpg"   alt=""/></a>
    <a href="javascript:void(popUp(445,238,'ten_quid.jpg'))"><img src="ten_quid.jpg"  alt=""/></a>
    <a href="javascript:void(popUp(360,280,'apple.JPG'))"><img src="apple.JPG"  alt=""/></a>
    </div>
    
    </body>
    </html>
    coothead


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •