...

View Full Version : html file as source for an image



kiranj
10-23-2007, 03: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...

effpeetee
10-23-2007, 04:03 PM
http://www.exitfegs.co.uk/hovercss.html

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.

Frank

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;}

abduraooft
10-23-2007, 04: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.

kiranj
10-23-2007, 04: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:

background:url(alice-t1.gif)

I should be able to give

background:url(alice-t1.html)

abduraooft
10-23-2007, 04: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.

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

Frank

This might help you.

http://www.boutell.com/newfaq/creating/backgroundfill.html

kiranj
10-23-2007, 05: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...

abduraooft
10-24-2007, 08: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.
http://www.w3schools.com/css/pr_class_float.asp

dcostalis
10-24-2007, 08: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);
readfile($img);
}
?>


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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum