View Full Version : CSS getting image from CSS file

Mar 14th, 2008, 06:28 AM
Hey all i am trying to get the picture to display in an <img> tag from the CSS code and NOT in the actual code for the <img> command.

<a href="#" rel="tabAboutMe1"><img class="Buttons" /></a>

.Buttons {background: url(../test.png); border: 0px; padding: 0px;}

Im sure i have the sytax incorrect but i cant find the way to pull the image from the CSS into the <img> tag in the HTML page. Reason being is that i have a lot of the rel="tab..." and it would be nice to be able to update the image from the CSS file than going into the HTML code and finding it and changing it there.

Thanks! :)

Mar 14th, 2008, 06:41 AM
no dice, can't set the src field of img as it's not a css property, it's an html property

Mar 14th, 2008, 06:41 AM
You're completely weird. I never had tried this.
This could'nt be done with CSS alone, maybe i'm mistaken, but you can do it with JS.
Something like this would work:

<script type="text/javascript">
window.onload = function()
document.getElementById('Buttons').src = '../test.png';
document.getElementById('Buttons').border = '0px';
document.getElementById('Buttons').padding = '0px';

and in your page:

<a href="#" rel="tabAboutMe1"><img id="Buttons" /></a>

Hope it helps ;)

Mar 14th, 2008, 06:43 AM
if you're really determined to get the source for the image from another file, you would have to do something like making an external script file to contain a function that would get your images by id and assign their sources as appropriate, then append onload="setImages()" to your body element (assuming that setImages is what you name the function in the script file)

Mar 14th, 2008, 06:50 AM
Ok, let me show u this code...

#imageMenu {position: relative;width: 750px;height: 60px;overflow: hidden; padding: 500;}
#imageMenu ul {list-style: none;margin: 0px;display: block;height: 85px;width: 1000px;}
#imageMenu ul li {float: left;}
#imageMenu ul li a {text-indent: -1000px;background: transparent;cursor:pointer;display:block;overflow:hidden; width: 70px;height: 210px;}
#imageMenu ul li.Home a {background: url(../img/hometab.png) repeat scroll 0%;}

<div id="imageMenu">
<li class="Home"><a href="#1" class="cross-link"></a></li>

Now that code above DOES place the hometab.png inside there... But i cant edit the imageMenu to just have the img and not all that other stuff (position,list-style, width, height, float, etc...)


Mar 14th, 2008, 06:58 AM
in the code you posted, there is no image element, that's why it works, you're not building in an image, you're setting the background of a list item, big difference. not sure what you're trying to do with the other comment about removing the rest of the styling, event if you could set an image element that way, those statements would still be necessary (most likely anyways) to preserve the feel of the layout

Mar 14th, 2008, 07:04 AM
ok, thanks for your help mjlorbet