Adding an image icon to two doctypes (.ppt & .doc)
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 posted this at 11:59 — 17th May 2010.
She has: 11,421 posts
Joined: Jun 1999
Why don't you just use CSS for this?
govicinity posted this at 12:14 — 17th May 2010.
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 posted this at 15:10 — 17th May 2010.
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;
}
Megan
Connect with us on Facebook!
govicinity posted this at 16:27 — 17th May 2010.
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 posted this at 16:58 — 17th May 2010.
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
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.