View Full Version : html file as source for an image

10-23-2007, 04:55 PM
Can we use a html file as source for a image. i.e. <img src="filename.html"> instead of <img src="filename.jpg/gif/bmp/png"> I tried it directly. but it did not work. is there anyother way.

My problem is I need to give background to the table header. the background image is having rounded edges and the width of the table varies as per page resolution. So if i can use a html file as background to the table cell, then my problem will be solved.

Generally we do this by inserting another table with 3 cells in my table cell and put two rounded edges in 2 leftmost and rightmost cells. But I have a chance to give only one background imagefor the cell.

Anybody have the solution for this please...

10-23-2007, 05:03 PM

This program uses url's to load in images. I do not know whether I have understood you, but the whole code is available by Viewing the source.


Just a sample.

.button a:hover#img01 {background:url(alice_t1.gif) no-repeat;}
.button a:hover#img02 {background:url(alice_t2.gif) no-repeat;}
.button a:hover#img03 {background:url(alice_t3.gif) no-repeat;}
.button a:hover#img04 {background:url(alice_t4.gif) no-repeat;}
.button a:hover#img05 {background:url(alice_t5.gif) no-repeat;}
.button a:hover#img06 {background:url(alice_t6.gif) no-repeat;}
.button a:hover#img07 {background:url(alice_t7.gif) no-repeat;}
.button a:hover#img08 {background:url(alice_t8.gif) no-repeat;}
.button a:hover#img09 {background:url(alice_t9.gif) no-repeat;}
.button a:hover#img10 {background:url(alice_t10.gif) no-repeat;}
.button a:hover#img11 {background:url(alice_t11.gif) no-repeat;}
.button a:hover#img12 {background:url(alice_t12.gif) no-repeat;}
.button a:hover#img13 {background:url(alice_t13.gif) no-repeat;}
.button a:hover#img14 {background:url(alice_t14.gif) no-repeat;}
.button a:hover#img15 {background:url(alice_t15.gif) no-repeat;}
.button a:hover#img16 {background:url(alice_t16.gif) no-repeat;}

10-23-2007, 05:08 PM
Why do you use img tags to serve as background?
Just look at http://www.w3schools.com/css/pr_background-image.asp
and find how to apply a background image.

10-23-2007, 05:13 PM
Thanks for the reply.

But I am seeing for a soultion to use html file as background instead of gif file. in your example:


I should be able to give


10-23-2007, 05:21 PM
No, (AFAIK)the image's src should be an image or a program which can create an image to display.
If your image is uniform pattern, just identify and create a small single piece and use the repeat property of background to it.

Edit: then the rounded edges can be achieved by the applying float (http://www.w3schools.com/css/pr_class_float.asp) to your other piece of image(rounded) placed as img.

10-23-2007, 05:22 PM
Have you tried it?


This might help you.


10-23-2007, 06:40 PM
effpeetee, yes I tried it. But not working

abduraooft, Edit: then the rounded edges can be achieved by the applying float to your other piece of image(rounded) placed as img could you please be more clear...

10-24-2007, 09:05 AM
What you have done so far? can you post some code or link to your page?
I think you haven't read the float's tutorial given in the above post.

10-24-2007, 09:31 AM
you can use a php file as an image file. Here's some source code picked apart from a couple of places that i simplified and tested really quickly. put this in a 'filename.php' file all by itself.

$extList = array();
$extList['gif'] = 'image/gif';
$extList['jpg'] = 'image/jpeg';
$extList['jpeg'] = 'image/jpeg';
$extList['png'] = 'image/png';
if (isset($_GET['img'])) {
$img= $_GET['img'];
if ($img!=null && fileexists($img)) {
$imageInfo = pathinfo($img);
$contentType = 'Content-type: '.$extList[ $imageInfo['extension'] ];
header ($contentType);

You use it like this:

<img src = "image.php?img=image.gif">

Obviously add the title and alt tags... make w3c happy...

I added some (lame) error checking, so that if no file is specified, or the file doesn't exist, it simply returns nothing. If you are trying to hide where the images are sources, you could make copies of the php file, and set the $img tag directly in the file.

Hope that helps!