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>
4 answers
solution1
1 ACCPTED 2013-09-10 18:17:52
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;
solution2
0 2013-09-10 18:13:29
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
}
solution3
0 2013-09-10 18:20: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;
solution4
0 2013-09-10 18:27:26
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;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.