Adding an image icon to two doctypes (.ppt & .doc)

govicinity's picture

They have: 10 posts

Joined: Feb 2008

Hi there, I'm running into a really easy problem to solve on this javascript script - but I can't get my head around it, it's just to auto add an image at the end of a link (basically a gif arrow pointing down), I already have it working on one file extension (.ppt), but also want it to work on .doc:

----------------------------

function fNewdownloadicon ()
{
if (!document.getElementsByTagName) return false;
var links = document.getElementsByTagName("a");
for (var eleLink=0; eleLink < links.length; eleLink ++) {
if (links[eleLink].href.indexOf('.ppt') !== -1) {
links[eleLink].onclick =
function() {
window.open(this.href,'resizable,scrollbars');
return false;
}
/* The below section adds the pop-out image */
var img = document.createElement("img");
img.setAttribute("src", "images/download-icon.gif");
img.setAttribute("alt", "(download document)");
links[eleLink].appendChild(img);
/* End of pop-out image code */
}
}
}
addLoadEvent(fNewdownloadicon);

----------------------------

I just want to add and extra document type to this line:

if (links[eleLink].href.indexOf('.ppt') !== -1) {
---
I thought this would work:

if (links[eleLink].href.indexOf('.ppt', '.doc') !== -1) {
---
but it doesn't... help! Cheers in advance

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

Why don't you just use CSS for this?

govicinity's picture

They have: 10 posts

Joined: Feb 2008

Hi Megan,
Thanks for the comment, this code is eventually going to be used on a CMS site which I won't have involvement in once it is live (unless something breaks), so I won't be able to use "rel" attributes in links or classes, if you have an idea on how to add an icon automatically to a link (.pdf, .doc, .ppt, .pps) I'd love to hear from you on this, it's foxing me a little!

Gov

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

Just use attribute selectors to find href attributes that end with .ppt, .doc etc. This is a snippet from one of the sites I developed:

a[href$=".doc"] {
padding: 3px 20px 0 0;
background: url(../images/icons/worddoc.gif) no-repeat right center;
}

a[href$=".ppt"] {
padding: 3px 20px 0 0;
background: url(../images/icons/powerpoint.gif) no-repeat right center;
}

govicinity's picture

They have: 10 posts

Joined: Feb 2008

Looks good here in FF3 on Mac, I'll check on all the relevant browsers tonight on my PC, thanks for the help, looks like it may be problem solved here, without the aid of JS which is much nicer, cheers Megan, good job.

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

I'm pretty sure that doesn't work in IE6 but otherwise it should be fine.

Glad I could be of help Smiling

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.