Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Linking to files

    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

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Code:
    <!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>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Code:
    createImg.setAttribute('class','icon');
    . It worked in firefox, but not IE. Any ideas why?

    Cheers
    Last edited by Biddlesby; 07-12-2007 at 08:59 PM.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Code:
    <!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>
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •