PDA

View Full Version : generating image via page title



Gitman
Feb 15th, 2011, 12:56 PM
I found this code in another thread... basically, I need to be able to display a certain image based on the page's title... for instance if the title is: Lotus 7, I need image lotus.jpg to display in an element on the page, however, if the title is Bodhi 9, I need image bodhi.jpg to display in the same element. Can someone help me implement this code?



var imgs = new Array();

imgs[0] = new Array();
imgs[0][0] = "Research";
imgs[0][1] = "bluetabs_01";
imgs[0][2] = "greentabs_01.gif";

imgs[1] = new Array();
imgs[1][0] = "Information"
imgs[1][1] = "bluetabs_02";
imgs[1][2] = "greentabs_02.gif";




var title = document.title;
for (var i=0;i<imgs.length;i++){
if (title.indexOf(imgs[i][0])!=-1){
document.images[imgs[i][1]].src = imgs[i][2];
break;
}
}

Gitman
Feb 15th, 2011, 07:45 PM
anyone help with this?

oVTech
Feb 15th, 2011, 08:03 PM
Something along these lines (not tested):


var imgs = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg"];
var el = document.getElementById('someImage');

var title = document.title;

if (title == "some title") {
el.src = imgs[0];
}

else if (title == "some other title") {
el.src = imgs[1];
}

Gitman
Feb 16th, 2011, 05:56 AM
Something along these lines (not tested):


var imgs = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg"];
var el = document.getElementById('someImage');

var title = document.title;

if (title == "some title") {
el.src = imgs[0];
}

else if (title == "some other title") {
el.src = imgs[1];
}


is that the only .js code I need, and then add something like <div id="someimage"> </div> to the body?

low tech
Feb 16th, 2011, 06:01 AM
Hi

try this.



<!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 = ["1image.jpg", "2image.jpg", "3image.jpg"];
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;
}
}
</script>
</body>
</html>

LT

Gitman
Feb 16th, 2011, 06:27 AM
Hi

try this.



<!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 = ["1image.jpg", "2image.jpg", "3image.jpg"];
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;
}
}
</script>
</body>
</html>

LT

Hi, that works great. however, the title won't simply be the image name... the title will be two words plus the company name like: One Two - Company Name. Is there a way to just pick a keyword in the title and generate a specific image from that?!?!

low tech
Feb 16th, 2011, 06:39 AM
Hi

To be honest I don't really know hahaha my coding skills are not that good --- just learning

but i'm sure that now you have a start some expert here will be able to help you out.

If not then start a new thread with the title

eg
"Is there a way to just pick a keyword in the title"

and show what you have so far.

best of luck

LT

Gitman
Feb 16th, 2011, 06:47 AM
Actually I can put spaces and hyphens in the image title and it's working! Does anyone see a problem with this:

<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"];
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;
}
}
</script>

Gitman
Feb 16th, 2011, 07:40 AM
man, this simply little code is working BEAUTIFULLLYYYYYY, I implemented it on our site and no issues whatsoever... checked in IE7, IE8, Chrome 9, FF3+

low tech
Feb 16th, 2011, 07:46 AM
Hi

must be your lucky day hahahahhaha

i'd buy a lottery ticket:-)

LT

ps if you feel happy it's ok to hit the thank you button:-) [optional]


also just an example and you have probably done it already but if you tab out nicely it will be easier to read your images.


example only:


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
];

Gitman
Feb 16th, 2011, 08:12 AM
Ok, another great tip - I thanked both of your posts!!! Thanks again.

low tech
Feb 16th, 2011, 08:14 AM
Hi hahahha

Thanks

I added a default image incase nothing is found see the else part.




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
}

LT

Gitman
Feb 16th, 2011, 09:24 AM
another thanked post!!