...

View Full Version : Linking to files



Biddlesby
07-12-2007, 07:22 PM
I want a command that I can type in whenever I link to a file that will put a little icon next to the hyperlink. So for example a microsoft word icon next to a text link to a .doc.

Am I going to have to use XML or something for this? I have never attempted any XML and know nothing about it. Is there anyway I can achieve this in the middle of my HTML code?

Cheers

_Aerospace_Eng_
07-12-2007, 07:39 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
a img {
border:0;
}
</style>
<script type="text/javascript">
window.onload = function()
{
var links = document.getElementsByTagName('a');
var createImg = document.createElement('img');
for(var i = 0; i < links.length; i++)
{
el = links[i].getAttribute('href').substring(links[i].getAttribute('href').length - 3);
alert(el);
if(el == 'doc')
{
createImg.setAttribute('src','word.gif');
createImg.setAttribute('alt','Word Document');
links[i].setAttribute('title','Word Document');
}
if(el == 'pdf')
{
createImg.setAttribute('src','pdf.gif');
createImg.setAttribute('alt','PDF Document');
links[i].setAttribute('title','PDF Document');
}
if(el == 'zip')
{
createImg.setAttribute('src','zip.gif');
createImg.setAttribute('alt','Zip File');
links[i].setAttribute('title','Zip File');
}
links[i].appendChild(createImg);
alert(links[i].innerHTML);
}
}
</script>
</head>

<body>
<a href="file.doc">Word Document</a>
<a href="file.zip">Zip File</a>
<a href="file.pdf">PDF Document</a>
</body>
</html>

Biddlesby
07-12-2007, 07:53 PM
That looks just what I am looking for. A few problems:

The alerts come up, and each time I click on them the icon disapears from the first link, and appears on the second, so that I end up with the icon only after the last link.

How can I have the icon before the link?

I added the line
createImg.setAttribute('class','icon');. It worked in firefox, but not IE. Any ideas why?

Cheers

_Aerospace_Eng_
07-12-2007, 07:57 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
a img {
border:0;
}
</style>
<script type="text/javascript">
window.onload = function()
{
var links = document.getElementsByTagName('a');
var createImg = document.createElement('img');
for(var i = 0; i < links.length; i++)
{
el = links[i].getAttribute('href').substring(links[i].getAttribute('href').length - 3);
if(el == 'doc')
{
createImg.setAttribute('src','word.gif');
links[i].setAttribute('title','Word Document');
}
if(el == 'pdf')
{
createImg.setAttribute('src','pdf.gif');
links[i].setAttribute('title','PDF Document');
}
if(el == 'zip')
{
createImg.setAttribute('src','zip.gif');
links[i].setAttribute('title','Zip File');
}
links[i].insertBefore(createImg,links[i].firstChild);
}
}
</script>
</head>

<body>
<a href="file.doc">Word Document</a>
<a href="file.zip">Zip File</a>
<a href="file.pdf">PDF Document</a>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum