Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Junior Member
    Join Date
    Dec 2007
    Posts
    5
    Member #
    16270
    Hello guys.
    I have a problem with buttons. When i create nice rounded button or circle button (for example in Photoshop) for my html page, every time when i save it in (jpg, gif, png formats) there is the ugly square. How can i save it without the squere? Also i set the backround transparent, so it shouldn`t be there, right?
    Here is an example.
    http://img212.imageshack.us/my.php?i...utton25nc6.gif

  2.  

  3. #2
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    We would need to see your code, as the border may be a CSS rule rather than a part of the image itseld.

    Code:
    img
    {
     border: none;
    }

  4. #3
    Junior Member
    Join Date
    Dec 2007
    Posts
    5
    Member #
    16270
    Hi bfsog
    I am coding my web in Html and Java for rollover effect. When i try to save the created buttons on transparent background and check them in ACDSee i see the square, so i think that i am doing something wrong in Photoshop.
    Here is my code:
    The button names are ambilobe1.gif, ambilobe2.gif, nosy be1.gif, nosy be2.gif, calyptratus1.gif, calyptratus2.gif, diego suarez1.gif, diego suarez2.gif, laticauda1.gif, laticauda2.gif....
    -----------------------------------------------------------------
    <!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="style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
    <!--
    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_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_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 link="0f4ac5" vlink="0f4ac5" alink="0f4ac5" background="uvod/background.jpg" onload="MM_preloadImages('ambilobe2.gif','nosy be2.gif','ch.calyptratus2.gif','uvod2.gif','aktual ni nabidka2.gif','cenik2.gif','kontakt2.gif','diego suarez2.gif','klemeri2.gif','lineata lineata2.gif','laticauda2.gif','quadriocellata2.gi f','robertmertensi2.gif',',','uvod/mad grandis2.gif','uvod/mad grandis red2.gif')">
    <table align="center" width="808" height="1073" bordercolordark="#000000" bordercolorlight="#000000" border="8" "cellpadding="0" cellspacing="0">
    <tr>
    <td height="80" colspan="5"><p><img src="uvod/logo.jpg" width="799" height="160" valign="top" align="center" /></p> </td>
    </tr>
    <tr>
    <td width="193" height="27"><img src="uvod/skin.gif" width="192" height="37" /></td>
    <td width="148"><a href="uvod.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('uvod','','uvod/uvod2.gif',1)"><img src="uvod/uvod1.gif" alt="uvod" name="uvod" width="147" height="36" border="0" id="uvod" /></a></td>
    <td width="148" valign="top"><a href="aktualni nabidka.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('aktualni nabidka','','uvod/aktualni nabidka2.gif',1)"><img src="uvod/aktualni nabidka1.gif" alt="aktualni nabidka" name="aktualni nabidka" width="147" height="36" border="0" id="aktualni nabidka" /></a></td>
    <td width="148" valign="top"><a href="cenik.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('cenik','','uvod/cenik2.gif',1)"><img src="uvod/cenik1.gif" alt="cenik" name="cenik" width="147" height="36" border="0" id="cenik" /></a></td>
    <td width="147" valign="top"><a href="kontakt.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('kontakt','','uvod/kontakt2.gif',1)"><img src="uvod/kontakt1.gif" alt="kontakt" name="kontakt" width="147" height="36" border="0" id="kontakt" /></a></td>
    </tr>
    <tr>
    <td height="23"><img src="uvod/chameleoni.gif" alt="chameleoni" width="192" height="50" /></td>
    <td colspan="4" rowspan="14" background="uvod/background.jpg" valign="top"></td>
    </tr>
    <tr>
    <td height="31"><a href="calyptratus.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('chamaelo calyptratus','','uvod/ch.calyptratus2.gif',1)"><img src="uvod/ch.calyptratus1.gif" alt="calyptratus" name="chamaelo calyptratus" width="192" height="36" border="0" id="chamaelo calyptratus" /></a></td>
    </tr>
    <tr>
    <td height="38"><a href="ambilobe.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('ambilobe','','uvod/ambilobe2.gif',1)"><img src="uvod/ambilobe1.gif" alt="F.pardalis ambilobe" name="ambilobe" width="192" height="36" border="0" id="ambilobe" /></a></td>
    </tr>
    <tr>
    <td height="37"><a href="diego suarez.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('diego suarez','','uvod/diego suarez2.gif',1)"><img src="uvod/diego suarez1.gif" alt="diego suarez" name="diego suarez" width="192" height="36" border="0" id="diego suarez" /></a></td>
    </tr>
    <tr>
    <td height="37"><a href="nosy be.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nosy be','','uvod/nosy be2.gif',1)"><img src="uvod/nosy be1.gif" alt="F.pardalis nosy be" name="nosy be" width="192" height="36" border="0" id="nosy be" /></a></td>
    </tr>
    <tr>
    <td height="37"><img src="uvod/phelsumy.gif" alt="phelsumy" width="192" height="50" /></td>
    </tr>
    <tr>
    <td height="37"><a href="klemeri.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('klemeri','','uvod/klemeri2.gif',1)"><img src="uvod/klemeri1.gif" alt="klemeri" name="klemeri" width="192" height="36" border="0" id="klemeri" /></a></td>
    </tr>
    <tr>
    <td height="21"><a href="laticauda.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('laticauda','','uvod/laticauda2.gif',1)"><img src="uvod/laticauda1.gif" alt="laticauda" name="laticauda" width="192" height="36" border="0" id="laticauda" /></a></td>
    </tr>
    <tr>
    <td height="21"><a href="lineata lineata.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('lineata lineata','','uvod/lineata lineata2.gif',1)"><img src="uvod/lineata lineata1.gif" alt="lineata lineata" name="lineata lineata" width="192" height="36" border="0" id="lineata lineata" /></a></td>
    </tr>
    <tr>
    <td height="21"><a href="mad grandis.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('mad grandis','','uvod/mad grandis2.gif',1)"><img src="uvod/mad grandis1.gif" alt="mad grandis" name="mad grandis" width="192" height="36" border="0" id="mad grandis" /></a></td>
    </tr>
    <tr>
    <td height="21"><a href="mad grandis red.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('mad grandis red','','uvod/mad grandis red2.gif',1)"><img src="uvod/mad grandis red1.gif" alt="mad grandis red" name="mad grandis red" width="192" height="36" border="0" id="mad grandis red" /></a></td>
    </tr>
    <tr>
    <td height="23"><a href="quadriocellata.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('quadriocellata','','uvo d/quadriocellata2.gif',1)"><img src="uvod\quadriocellata1.gif" alt="quadriocellata" name="quadriocellata" width="192" height="36" border="0" id="quadriocellata" /></a></td>
    </tr>
    <tr>
    <td height="28"><a href="robertmertensi.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('robertmertensi','','uvo d/robertmertensi2.gif',1)"><img src="uvod\robertmertensi1.gif" alt="robertmertensi" name="robertmertensi" width="192" height="36" border="0" id="robertmertensi" /></a></td>
    </tr>
    <tr>
    <td height="451" background="uvod/background.jpg">&nbsp;</td>
    </tr>
    </table>
    </body>
    </html>

  5. #4
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    So, basically, you'll have to make your background in whatever program you are creating the image in transparent (make sure alpha transparency is on -- typically this is represented by a checkered background). Moreover, it's important that, when you export, you make sure transparency is included in the export. In GIF, make sure an alpha channel is included. PNG should do it automatically, but you might want to look for an alpha transparency option. And JPG cannot handle transparency, so you shouldn't use it at all.

    Finally, if you decide to use PNGs, note that there are some issues with them out of the box in IE. There are many workarounds in existence; just look up `PNG alpha transparency' here or on the internet, and you'll find a bajillion hits

  6. #5
    Senior Member straight_up's Avatar
    Join Date
    Dec 2003
    Location
    Pennsylvania/Arizona
    Posts
    601
    Member #
    4309
    Yeah, specifically IE <= 6 has problems with it. big ones. that suck. a lot.

    I came up with a pretty unique fix for it, though... I'm too busy to post it as I want to, but this should rock your socks:

    http://demo.pixelsandpages.com/php-t...ages/test.html
    I am Alan Hogan (@alanhogan on Twitter). I like PHP, UI/UX design, and OS X.

  7. #6
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    An interesting fix, but it suffers from the usual issues that user agent sniffing suffers from; namely, people who have their user agent spoofed (say, to be allowed into their banking system, as I must do) get served the wrong image.

    The IE behaviors method is the most ideal solution I've found to date. However, it suffers from some issues, namely the fact that this fix disallows tiling background images (there are other weird and froody bugs that come out with this solution, however). In the end, where I can, I have always resorted to separate GIFs for IE if possible. Meantime, I use conditional includes to override CSS that sets PNG backgrounds. It's a bit complicated, but it gets the job done with a surprisingly small amount of trouble.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 11:56 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com