Go Back   Cyber Tech Help Support Forums > Software > Web Development & Graphic Design

Notices

Web Development & Graphic Design Problem Solving for Graphic Design, PHP, ASP, Perl, MySQL, SQL, XML, HTML issues

Reply
 
Topic Tools
  #1  
Old March 8th, 2007, 07:39 AM
Delphi123 Delphi123 is offline
Senior Member
 
Join Date: Sep 2003
Age: 77
Posts: 645
Removing white space around image links -- How?

Dear friends:

I would appreciate your help with a minor issue that I just don't know how to resolve. Please see the following URL:

http://www.newpoetryreview.com/NPR-E...oet/index.html

username: guest
password: welcome

I have added an aquamarine background to my Contemporary Russian Poetry site. My only problem, both in the main frame and the left frame is that the image links (Next, Home, etc.) include a white rectangular background that is very unsightly. How do I correct this? How do I remove the white space and allow the image links to rest naturally against the aquamarine background?

One more thing: Please see screenshot of the site in Mozilla:

http://www.websher.net/tmp/framebar.png

If you compare the frame bar separating the mainframe from the leftframe, you will see that the color scheme for the Mozilla version is much better integrated into the general color scheme while that in IE 6 is blue against a narrow, white, vertical rectangular border. How do I code the vertical bar so that it looks like Mozilla in every browser?

Please include precise code.

Thank you so much.

Benjamin

Last edited by Delphi123; March 8th, 2007 at 07:50 AM.
Reply With Quote
  #2  
Old March 8th, 2007, 08:36 AM
rockboy's Avatar
rockboy rockboy is offline
Cyber Tech Help Moderator
 
Join Date: Aug 2002
O/S: Windows 7 64-bit
Location: California, USA
Posts: 3,087
The images were made with a white background color. You need to convert them from jpg file format to gif and make the white color transparent. Photoshop, IrfanView, or any decent graphics program can do that.

The scrollbars are the default browser color so there's not much you can do because the viewers' default colors will be different from yours anyway. If you want to experiment with changing the IE scrollbar there's an IE-only css hack that can change scrollbar colors. (It's not valid css.) It's probably not worth the effort but you can try it.
http://www.google.com/search?hl=en&q...or&btnG=Search
Reply With Quote
  #3  
Old March 8th, 2007, 10:10 AM
Delphi123 Delphi123 is offline
Senior Member
 
Join Date: Sep 2003
Age: 77
Posts: 645
Dear rockboy:

My thanks as always for your kind help. I saved the jpg image as a gif, but I have no idea how to create a transparent version of the image. I can see the option in IrfanView but I don't really know how to proceed. Do I first save the image as a gif and then convert it to transparent gif or do I do both at the same time: I can see the transparency option in Irfanview but I really would appreciate it if you could show me step by step how to do it.

Thank you.

Benjamin
Reply With Quote
  #4  
Old March 8th, 2007, 10:46 AM
rockboy's Avatar
rockboy rockboy is offline
Cyber Tech Help Moderator
 
Join Date: Aug 2002
O/S: Windows 7 64-bit
Location: California, USA
Posts: 3,087
Open the file with IrfanView
File/Save As... choose GIF
In the box where it says GIF, checkmark Save Transparent Color
Make sure Choose Transparent color during save radio button is checked.
Click Save, that will give you a new window to choose the transparent color.
Click on the white background.
Reply With Quote
  #5  
Old March 8th, 2007, 10:56 AM
Delphi123 Delphi123 is offline
Senior Member
 
Join Date: Sep 2003
Age: 77
Posts: 645
Dear rockboy:

I've followed your instructions to the letter but I still can't make it work.

Question: do I need to check the radio button "save interlaced"? And what about the radio button "set transparency value to palette entry [0]." If so, what value do I need to give it? Is it from 0 to 100? How do I determine that?

When I click on save as gif, I see the image magnified to a very large size. I then click on the white space but nothing happens. Quite confused. Hope you can help.

Thank you again.

Benjamin

When I
Reply With Quote
  #6  
Old March 8th, 2007, 11:11 AM
rockboy's Avatar
rockboy rockboy is offline
Cyber Tech Help Moderator
 
Join Date: Aug 2002
O/S: Windows 7 64-bit
Location: California, USA
Posts: 3,087
It works for me. Are you looking at the new file you made or the one that's still open in Irfan? It doesn't change the file that's open in IV, that one is still a jpg. You should have a new gif file in the location you chose when you saved it.

You won't have a pallette number on the jpg file. If you're working with a gif you can look it up in the Image/Pallette/Edit menu. Forget that, it's easier to click the area you want to be transparent when you save it.

Last edited by rockboy; March 8th, 2007 at 11:21 AM. Reason: Chg "View" to "Image" menu
Reply With Quote
  #7  
Old March 8th, 2007, 11:19 AM
Delphi123 Delphi123 is offline
Senior Member
 
Join Date: Sep 2003
Age: 77
Posts: 645
Dear rockboy:

My apologies, but I can't seem to get rid of the white background, no matter what I do. Could you please explain the last steps carefully, step by step, that is, beyond the steps you have already mentioned.

Do I check "interlaced"? Do I check transparency value in palette entry?

When I click on the white space, nothing happens. I can see that I have created a gif version of Next (next.gif), but the white background is still there.

Hope you can help.

Thank you.

Benjamin
Reply With Quote
  #8  
Old March 8th, 2007, 11:25 AM
Delphi123 Delphi123 is offline
Senior Member
 
Join Date: Sep 2003
Age: 77
Posts: 645
Dear rockboy and friends:

Here is one of the jpg images: NEXT.jpg. May I ask if you could please download it from my web site and show me how you convert it to a transparent Gif step by step. I have read the instructions in Irfanview's Help but I still can't figure out precisely how to do it.

http://www.websher.net/tmp/NEXT.jpg

Thank you so much.

Benjamin
Reply With Quote
  #9  
Old March 8th, 2007, 11:48 AM
rockboy's Avatar
rockboy rockboy is offline
Cyber Tech Help Moderator
 
Join Date: Aug 2002
O/S: Windows 7 64-bit
Location: California, USA
Posts: 3,087
Quote:
Originally Posted by rockboy View Post
Open the file with IrfanView
File/Save As... choose GIF
In the box where it says GIF, checkmark Save Transparent Color
Make sure Choose Transparent color during save radio button is checked.
Click Save, that will give you a new window to choose the transparent color.
Click on the white background.
Quote:
Originally Posted by Delphi123 View Post
Do I check "interlaced"? Do I check transparency value in palette entry?
No and no. Interlaced is a characteristic that really doesn't matter in this context. You can only choose one radio button, choose the one that says "Choose transparent color during saving". That will give you the big image that you can click on to choose the transparent color.

The instructions are step by step, I don't know how to add more detail. The gif image you've created will still look white unless it's in a context that shows the transparency, such as on a webpage with a contrasting background color. In Irfanview I have made my background a dark grey so that transparency is visible.
Attached Images
File Type: gif scr-delphi_next.gif (9.6 KB, 5 views)
Reply With Quote
  #10  
Old March 8th, 2007, 07:41 PM
Delphi123 Delphi123 is offline
Senior Member
 
Join Date: Sep 2003
Age: 77
Posts: 645
Dear rockboy:

I did as you suggested and I uploaded the Next.gif image and replaced Next.jpg with Next. gif in the html files that point to it but Next.gif still appears with a white background. Can you suggest an online site that has ready-made transparent navigational GIF's that I can use on my site?

Thank you.

Benjamin
Reply With Quote
  #11  
Old March 8th, 2007, 10:02 PM
rockboy's Avatar
rockboy rockboy is offline
Cyber Tech Help Moderator
 
Join Date: Aug 2002
O/S: Windows 7 64-bit
Location: California, USA
Posts: 3,087
I don't know why it won't work for you. If you save the image again after you've saved it with transparency, then the image loses it's transparency. It should only be saved once.

Here's an IrfanView tutorial, with screenshots, for making gif's with transparency. Skip the first 4 steps about changing the background color, you don't need to do that.
http://www.xandorra.net/tut_irfanview.php

I don't know of any specific sources for nav images but there are many out there. Here's a list.
http://www.google.com/Top/Computers/...ments/Buttons/
Reply With Quote
  #12  
Old March 8th, 2007, 10:13 PM
Delphi123 Delphi123 is offline
Senior Member
 
Join Date: Sep 2003
Age: 77
Posts: 645
Dear rockboy:

Thanks so much for everything. Really appreciate your help. Will take it from here.

Thanks again.

Benjamin
Reply With Quote
  #13  
Old March 9th, 2007, 06:11 AM
Delphi123 Delphi123 is offline
Senior Member
 
Join Date: Sep 2003
Age: 77
Posts: 645
Dear rockboy:

Finally figured it out. It works fine. Unfortunately, I am not too happy with the obviously inferior quality of the GIF itself. So, I used some other jpg images that do not have a white background. Everything is fine, and my thanks again for your kind help.

Benjamin
Reply With Quote
Reply

Bookmarks

Topic Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Topics
Topic Topic Starter Forum Replies Last Post
Removing links Tech Quest Internet / Browsers 1 February 5th, 2009 02:00 AM
Removing links Tech Quest The Anything Else Board 1 February 4th, 2009 05:33 PM
White Space? dudeking Web Development & Graphic Design 13 November 9th, 2006 09:32 PM
removing white line round images? thestickman Web Development & Graphic Design 1 March 27th, 2006 02:58 AM


All times are GMT +1. The time now is 01:24 PM.