473,385 Members | 1,373 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,385 software developers and data experts.

Help creating anchor with image

3
I'm stumped. I've googled this until I lost consciousness and cannot find an answer. I'm trying to write a specific anchor/link depending upon the option selected from a drop-down list. The link from the image is to a pdf file. Can someone point me in the right direction?

Here is my code:

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. function getScorecard(sel)
  3. {
  4.  
  5. //create the scorecard node
  6. var myA=document.createElement("A");
  7. var myImg=document.createElement("IMG");
  8. var url = "http://14holegolf.googlepages.com/Birecree-Contestable.pdf";
  9.  
  10. myA.setAttribute("href",url);
  11.  
  12. //create the image node
  13. url = "http://14holegolf.googlepages.com/Birecree-Contestable.jpg";
  14. var myImg=document.createElement("IMG");
  15. myImg.setAttribute("src",url);
  16.  
  17. // Append the image node to the anchor
  18. myA.setAttribute("img", myImg);
  19.  
  20. document.getElementById('targetDiv').appendChild(myA);
  21.  
  22.  
  23. }
  24. </script>
  25.  
  26.  <form action="" method="post">
  27.      <table align="center" border="0" cellpadding="8" width="680">
  28.          <tbody>
  29.              <tr>
  30.                  <td align="right"><b>Team:</b></td>
  31.                  <td align="left"><select name="team" onchange="getScorecard(this)">
  32.                      <option value="" selected>Select a team</option>
  33.                      <option value="1">Option 1</option>
  34.                      <option value="2">Option 2</option>
  35.                     </select>
  36.                 </td>
  37.             </tr>
  38.             <tr>
  39.                 <td colspan="3"> <div id="targetDiv"></div>
  40.                 </td>
  41.             </tr>
  42.         </tbody>
  43.     </table>
  44. </form>
Mar 13 '09 #1
5 2427
acoder
16,027 Expert Mod 8TB
Change line 18 to:
Expand|Select|Wrap|Line Numbers
  1. myA.appendChild(myImg);
You can get rid of either of lines 7 or 14 - one's redundant.
Mar 13 '09 #2
fedude
3
acoder,

Thanks that did the trick. Frustration level now lower....

I'm still not 100% clear why my solution didn't work. Apparently img is not an attribute of an anchor element???
Mar 13 '09 #3
acoder
16,027 Expert Mod 8TB
Yes, that's correct. Look how it appears in HTML:
Expand|Select|Wrap|Line Numbers
  1. <a href="..."><img src="..."></a>
so img is a child of the anchor, not an attribute.
Mar 13 '09 #4
fedude
3
That clears it up. My stupidity. Thanks!
Mar 13 '09 #5
acoder
16,027 Expert Mod 8TB
No problem, glad to help!
Mar 13 '09 #6

Sign in to post your reply or Sign up for a free account.

Similar topics

14
by: Akbar | last post by:
Hey there, Big-time curiosity issue here... Here's the test code (it's not that long)... it's to display a large number of image links with captions, ideally pulled in from an external file...
9
by: David Ross | last post by:
In some cases, I indicate links with both a small image and also text, both in the same anchor. When I upgrade my pages to incluce DOCTYPE for HTML 4.01 transitional, the underline for the link...
1
by: Frostillicus | last post by:
Does anyone know how to get around the problem IE seems to suffer from whereby an image within an anchor tag ignores the :hover pseudo element for the anchor in which it lives? Firefox is fine but...
3
by: ningjun.wang | last post by:
Hello: My html file contains the following image link: <a href="some_url"><img src="MyImage.gif"></a> How can I use Javascript to find out the value of some_url for the given image name...
1
by: Raj Chudasama | last post by:
i have a need to load image from URL. the image is really small (gif) and i use the following code. but the code is too slow any1 have any alternative way(S)? here is the url...
33
by: STILL LEARNING | last post by:
I'm not sure if this can even be done, but what prompts the question is my desire to be able to create an "Uber Link" script/code of some sort, such that even if the html page contains nothing but...
3
by: gaz123 | last post by:
I realise this is probably something simple, but here goes. I'm a home-taught student and have been set the task of creating a GUI and engine for a game. My engine works fine, as did my GUI before my...
5
by: Kalpana Durairaj | last post by:
I want to insert my image within search result anchor(say google search results). <a href="http://www.codeproject.com">Code Project <!-- Google search result link--> <img src="myimage.png"...
0
by: zeckdude | last post by:
Hi, I am having some issues with my site. I have a main Nav with four links that load in 4 different sections. You can see the page I am working on here:...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.