Change image depending on page title

Question

What I'm trying to do is depending on the page title, an image in the body would change. For example, if the page title is "We Love Apples," the image in the body would be an apple. If the title contains another fruit, it would show that other fruit. If the page title doesn't contain any word that the script is looking for, then there would be a default image in the body.

I did find this script from http://www.codingforums.com/archive/index.php/t-218600.html but I can't seem to make it work.

Anyone has any tips or pointers? Appreciate the help!

<!doctype html>
<html>
<title>2image</title>
<head>
</head>
<body>

<div><img src="" alt="anImageDesc" name="myimage" width="50px" height="50px" id="someImage" />
</div>

<script type="text/javascript">
var imgs = [
"http://www.domain.com/images/image_255 Company_Name.jpg",
"http://www.domain.com/images/image_256 Company_Name.jpg",
"http://www.domain.com/images/image_257 Company_Name.jpg" //no comma after last image
];
var el = document.getElementById("someImage");
var title = document.title;
for (var i=0;i<imgs.length;i++){
if (imgs[i].indexOf(title) != -1) { 
el.src = imgs[i];
break;  
} else {el.src = "image_256.gif"} //a default image incase nothing is found
}
</script>

</body>
</html>

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

1

See this: `DEMO`

I would suggest having a key/value map of tokens to look for in the title, and associating the appropriate image with that token:

var images = {
    'very large apple' : 'http://www.domain.com/images/very_large_apple_image_here.jpg',
    'large apple' : 'http://www.domain.com/images/large_apple_image_here.jpg',
    'apple' : 'http://www.domain.com/images/apple_image_here.jpg',
    'orange' : 'http://www.domain.com/images/orange_image_here.jpg'
};

var defaultImage = images['apple']; //Set your default here.
var imageElement = document.getElementById("someImage");
var title = document.title.toLowerCase();
var source = null;

for (var t in images) {
    if (title.indexOf(t.toLowerCase()) != -1) {
        source = images[t]; //Found a match.
        break;
    }
}

if (!source) source = defaultImage;

imageElement.src = source;

edited Jun 20 '20 at 09:12

Community

1
1

answered Sep 10 '13 at 18:17

crush

16,713
9
59
100

Fixed to allow for substrings like `apples`. – crush Sep 10 '13 at 18:23
Is there way to adjust it so it would also look for two words, for example "large apples," causing an image of a large apple to appear in the body? – user2069690 Sep 10 '13 at 19:00
make the key `large apple`, like: `'large apple': 'my_large_apple.jpg'` – crush Sep 10 '13 at 19:02
Sorry, also make sure you put it before the `'apple'` key, or otherwise it will find a match in `'apple'` first, and exit the loop. – crush Sep 10 '13 at 19:10
Likewise, if you wanted to add a key for `very large apple`, you'd need to place it before both `large apple` and `apple`. – crush Sep 10 '13 at 19:12

score 0 · Answer 2 · answered Sep 10 '13 at 18:13

0

Use document.title to get the window title, and set your image based on that. I used toUpperCase() to make sure you find the text you are looking for regardless of case. search() will return -1 if the text is not found.

if(window.title.toUpperCase().search('APPLE') > 0)
{
    //change image to apple
}
else if(document.title.toUpperCase().search('ORANGE') > 0)
{
    //change image to orange
}
else 
{
    //use the default image
}

answered Sep 10 '13 at 18:13

gwin003

7,432
5
38
59

i'd use switches personally. Or use key/value collection. – UIlrvnd Sep 10 '13 at 18:14
@StefanDenchev How could you search for different text using a switch? – gwin003 Sep 10 '13 at 18:16
i don't think i would, no :). Though [apparently you can](http://stackoverflow.com/questions/2896626/switch-statement-for-string-matching-in-javascript) (somewhat). – UIlrvnd Sep 10 '13 at 18:26

score 0 · Answer 3 · answered Sep 10 '13 at 18:20

Define what fruits to look for, then check the title to see if it contains any of the fruits, then find the appropriate image :

var fruits = [
    'apple',
    'orange',
    'grape'
]

var imgs = [
    "http://www.domain.com/images/image_255_grape.jpg",
    "http://www.domain.com/images/image_256_orange.jpg",
    "http://www.domain.com/images/image_257_apple.jpg"
];

var fruit = 'apple', // default
    img   = '';

// check the title for fruit
for (var i=0; i<fruits.length; i++) {}
    if ( document.title.indexOf(fruits[i]) != -1 ) fruit = fruits[i];
}

//find matching image
for (var i=0; i<imgs.length; i++) {}
    if ( imgs.indexOf(fruit) != -1 ) img = imgs[i];
}

var el = document.getElementById("someImage");
el.src = img;

score 0 · Answer 4 · answered Sep 10 '13 at 18:27

Create a lookup:

var myList = {
    images: [{
        id: "grape",
        name: "somelocation/file.png"
    }, {
        id: "crabapple",
        name: "c:/images/brightblue.png"
    }, {
        id: "lime",
        name: "grassgreen.png"
    }, {
        id: "bannana",
        name: "dollarbill.png"
    }]
};

var lookup = {};
// create refernece to list above and use it everywhere
lookup.list = myList;
for (var i = 0, len = lookup.list.images.length; i < len; i++) {
    lookup[lookup.list.images[i].id] = lookup.list.images[i];
}
alert(lookup['lime'].name);

and for the title:

lookup[document.title].name;

Note this also works for strings such as "We love red apple" as long as that matches the id string. — Mark Schultheiss, Sep 10 '13 at 18:30

Change image depending on page title

4 Answers4

See this: DEMO

See this: `DEMO`