LinkBack URL
About LinkBacksHello 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
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
Thread: Problem with buttons
-
Dec 28th, 2007, 04:54 AM #1Junior Member
- Join Date
- Dec 2007
- Posts
- 5
- Member #
- 16270
-
Dec 28th, 2007 04:54 AM
-
Dec 28th, 2007, 05:14 AM #2Senior 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; }
-
Dec 30th, 2007, 05:29 PM #3Junior 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"> </td>
</tr>
</table>
</body>
</html>
-
Jan 03rd, 2008, 12:38 AM #4Senior 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
-
Jan 03rd, 2008, 03:42 PM #5Senior Member
- 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.htmlI am Alan Hogan (@alanhogan on Twitter). I like PHP, UI/UX design, and OS X.
-
Jan 03rd, 2008, 06:39 PM #6Senior 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.
Reply With Quote
