根据页面标题更改图像
[英]Change image depending on page title
问题描述
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. 例如，如果页面标题是“ We Love Apples”，则正文中的图像将是一个苹果。 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. 我确实从http://www.codingforums.com/archive/index.php/t-218600.html找到了该脚本，但似乎无法使其正常工作。
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 个解决方案
解决方案1
1 已采纳 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;
解决方案2
0 2013-09-10 18:13:29
Use document.title to get the window title, and set your image based on that. 使用document.title获取窗口标题，然后基于该窗口标题设置图像。 I used toUpperCase() to make sure you find the text you are looking for regardless of case. 我使用toUpperCase()来确保无论大小写都找到要查找的文本。 search() will return -1 if the text is not found. 如果找不到文本， search()将返回-1。
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
}
解决方案3
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;
解决方案4
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;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.