• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 482
  • Last Modified:

Write CSS background filename from current page filename string

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
0
controltheweb
Asked:
controltheweb
3 Solutions
 
ZvonkoSystems architectCommented:
How about this:


<html>
<head>
<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>");
// -->
</script>
</head>
<body>

</body>
</html>


0
 
BogoJokerCommented:
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';
</script>

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:

<?php
$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
0
 
TNameCommented:
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">
<html>
<head>
<script type="text/javascript">
function assignFileName()
      {    
      var arr=window.location.href.split('/');
      var pname=arr[arr.length-1];
      pname=pname.split('.')[0];
      var elem = document.getElementById('apic');
      var orig=elem.style.backgroundImage;      
      arr2=orig.split('/');
      var uri=arr2[arr2.length-1];
      uri=uri.replace(/\)/, '');
      var newURL=orig.replace(uri,pname+'.jpg');
      elem.style.backgroundImage=newURL;
      }
</script>
<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; }

</style>
</head>
<body>
<div id="pic">
     <a id="apic" style="background: url('furniture/images/Trunk_test.jpg');" > Test </a>
</div>
<input type="button" onClick="assignFileName();">
</body>
</html>
0
 
controlthewebAuthor Commented:
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.
0
 
BogoJokerCommented:
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
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now