Write CSS background filename from current page filename string

Posted on 2007-08-04
Medium Priority
Last Modified: 2008-02-01
On a page this-is-the-filename.htm, I want the background of a style on the page to be this-is-the-filename.jpg. The image filename (without extension) needs to match the page filename (without extension),

alsadu.dreamhosters.com/furniture/furniture_test.htm has embedded style

#pic a {
      background: url('/furniture/images/Trunk_test.jpg');
      width: 320px; height:320px;
      display: block; margin: 0;      padding: 0;       }
#pic a:hover {
      background: url('/furniture/images/Trunk_test.jpg') 0 -320px; }

The string Trunk_test.jpg is what I want to be furniture_test.jpg, taking "furniture_test" from the filename furniture_test.htm
Question by:controltheweb
LVL 63

Accepted Solution

Zvonko earned 1600 total points
ID: 19632083
How about this:

<title>Zvonko &#42;</title>
<script type="text/javascript">
var pageName = location.pathname.split(/[\/\\\.]/);
pageName = pageName[pageName.length-2];
document.write("<sty"+"le>\n#pic a {\
      background: url('"+pageName+".jpg');\
      \nwidth: 320px;\nheight:320px; \
      \ndisplay: block;\nmargin: 0;\npadding: 0;\n}\
      \n#pic a:hover {\
      background: url('"+pageName+".jpg') 0 -320px;\n}</sty"+"le>");
// -->


LVL 17

Assisted Solution

BogoJoker earned 300 total points
ID: 19632107
Well there is no real easy way to do it.  You can find out the current pages name by parsing the URL :
<script type="text/javascript">
var str = document.location.toString();
var image_name = str.substr( str.lastIndexOf('/')+1, str.lastIndexOf('.') - str.lastIndexOf('/') - 1 );
image_name += '.jpg';

You could then manually set the background of all <a> elements inside #pic with that background image... but you might need to then implement some javascript to correctly swap the image onHover.

I think the easiest way to do this would be to implement this on the server-side.  If you were using PHP you could dynamically make a <style> section in the <head> based on the page name:

$pageName = $_SERVER['PHP_SELF'];
$pageName = substr($pageName, 0, strlen($pageName)-4); // remove .php = 4 chars
$cssStr = "background: url('/furniture/images/" . $pageName . ".jpg')";
echo '<style type="text/css">';
echo "#pic a { $cssStr }";
echo '#pic a:hover { $cssStr 0 -320px }";
echo '</style>';

Then each time your page is generated the image would be correct.. you wouldn't need to have javascript set the image, especially if the person viewing your page does not have JavaScript enabled.

- Joe P
LVL 28

Assisted Solution

TName earned 100 total points
ID: 19632117
Here's another version.

BTW, - important! - the background image has to be set with inline CSS, in order for js to be able to access  it's value (.style.backgroundImage).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<script type="text/javascript">
function assignFileName()
      var arr=window.location.href.split('/');
      var pname=arr[arr.length-1];
      var elem = document.getElementById('apic');
      var orig=elem.style.backgroundImage;      
      var uri=arr2[arr2.length-1];
      uri=uri.replace(/\)/, '');
      var newURL=orig.replace(uri,pname+'.jpg');
#pic a{
      background: url('/furniture/images/Trunk_test.jpg');
      width: 320px; height:320px;
      display: block; margin: 0;      padding: 0;       }
#pic a:hover {
      background: url('/furniture/images/Trunk_test.jpg') 0 -320px; }

<div id="pic">
     <a id="apic" style="background: url('furniture/images/Trunk_test.jpg');" > Test </a>
<input type="button" onClick="assignFileName();">

Author Comment

ID: 19632118
I think you're right, server side is probably the way to go. Had promised the client to avoid that, but maybe time for an exception.
LVL 17

Expert Comment

ID: 19632718
Zvonko's solution is almost exactly like the server side solution.  You should try with that if you believe the site's users will have JavaScript.

- Joe P

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question