Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    html file as source for an image

    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...

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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.

    Code:
    .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;}
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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)

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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 to your other piece of image(rounded) placed as img.
    Last edited by abduraooft; 10-23-2007 at 04:24 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Have you tried it?

    Frank

    This might help you.

    http://www.boutell.com/newfaq/creati...roundfill.html
    Last edited by effpeetee; 10-23-2007 at 04:49 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #7
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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
    Last edited by abduraooft; 10-24-2007 at 08:37 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    New Coder
    Join Date
    Oct 2007
    Posts
    49
    Thanks
    5
    Thanked 9 Times in 9 Posts
    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.

    Code:
    <?
            $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:

    Code:
    <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!
    Last edited by dcostalis; 10-24-2007 at 08:34 AM. Reason: clarification


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •