changing an image based on page title

[fini]

Hi,

I want to change the source of an image depending on the page title i.e. boats.html would show boats.jpg and car.htm would show car.jgp. I'm guessing some sort of javascript would be in order, but haven't got a clue really. Could anyone suggest anything?

worked it out:

<script language="JavaScript">
<!--
function setimage()
{
var picsource = document.URL.split('/').pop().split('.').shift();
var str=picsource +'.jpg';
document.images['monthimage'].src=str;
}
</script>

[sunja]

you could also try using document.title instead of all that split/pop/shift stuff:

var picsource = document.title;

EDIT: it might be "window.title" actually, not sure. one of those two.

[xrvel]

Originally Posted by sunja

you could also try using document.title instead of all that split/pop/shift stuff:

var picsource = document.title;

EDIT: it might be "window.title" actually, not sure. one of those two.

The document.title is the correct one.

If a document have no title, the document URL is displayed in title section, but, the JavaScript still considers the title as empty, therefore, we must check it based from the document URL. Here's the full code.

PHP Code:

<script type="text/javascript">
function setImage(imageId) {
    var docTitle = document.title + '';
    var docUrl = document.location + '';
    var picSource = '';

    picSource = docUrl.split('/').pop().split('.').shift();
    picSource = picSource +'.jpg';
    alert('Pic Source = ' + picSource);
    if (document.getElementById(imageId)) {
        document.getElementById(imageId).src = picSource;
    } else {
        alert('Image not found');
    }
}
</script>

<img src="a.jpg" id="your-image-id" />
<input type="button" value="Change Image" onclick="setImage('your-image-id')" />