By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,528 Members | 1,338 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,528 IT Pros & Developers. It's quick & easy.

Change link with onClick event - Javascript

P: 6
Hi
I am new here and my JavaScript knowledge is fairly limited. I am trying to find a way to change a link with an on click event. At the moment when you click on the link it changes the image and text stored in the imgflip div.

I would also like to be able to change the link stored there as the idea is that the user can look at the image, read the text and then click the link. Or ideally the whole image/text area is a link and the user can click anywhere. Though having a link at the bottom would still be best and look better.


Here is a screenshot of the website: http://www.imagehosting.nu/?v=javascriptproblem.jpg

and here is the code:


Expand|Select|Wrap|Line Numbers
  1. <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  3. <title>Wordpress Websites</title>
  4. <link href="home2012 css.css" rel="stylesheet" type="text/css" />
  5. <script type="text/javascript">
  6.  
  7. function changeImage(newimage) {
  8.         var changeimg = document.getElementById("imgchange");
  9.  
  10.         changeimg.src = newimage; 
  11. }
  12. function changedescription(newtext) {
  13.         var description = document.getElementById("description");
  14.  
  15.         description.innerHTML = newtext;                
  16. }
  17. function changewebaddress(newtext) {
  18.         var webdescription = document.getElementById("webdescription");
  19.  
  20.         webdescription.innerHTML = newtext;                
  21. }
  22. function changeurlMIC(urlMIC) {
  23.         var changeURLMIC = document.getElementById("URL");
  24.  
  25.         changeURLMIC.innerHTML = urlMIC;                
  26. }
  27. </script>
  28. </head>
  29.  
  30. <body>
  31. <div class="maincontainer">
  32.  
  33. <div class="navshow" id="navshow">
  34.     <ul class="navshow">
  35.     <li class="liheadingshow">
  36.     <h2>Wordpress Websites</h2>
  37.     </li>
  38.     <li><a href="#" onclick="changeImage('imgs/sampleMIC.gif'), changedescription('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dui justo, cursus quis varius mattis, convallis nec justo. Suspendisse potenti. Suspendisse quis mauris lorem. Maecenas at nunc tortor, nec laoreet velit.'), changewebaddress('Click here: www.meditateincopenhagen.org'), changeurlMIC('http://meditateincopenhagen.org/'); return false">Meditate in Copenhagen</a></li>
  39.  
  40.     <li><a href="#" onclick="changeImage('imgs/sampleMIB.gif'), changedescription('In laoreet sem vel mi suscipit placerat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.'), changewebaddress('Click here: www.meditasjonibergen.no'); return false">Meditate in Bergen</a></li>
  41.  
  42.     <li><a href="#" onclick="changeImage('imgs/sampleNDC2012.gif'), changedescription('Proin facilisis velit vitae augue semper vitae sodales odio malesuada. In a nisl sit amet dui placerat rutrum vel vel tellus. Phasellus leo velit, pharetra id scelerisque eget, volutpat eu ipsum. Pellentesque eget ante justo, vel dignissim odio. '), changewebaddress('Click here: www.kadampafestivals.org/scandinavia'); return false">2012 - Nordic Dharma Celebrations</a></li>
  43.  
  44.     <li><a href="webdesign.html">Back</a></li>
  45. </ul>
  46.  
  47. </div> <!--End of navbar -->
  48. <div class="imgflipshow">
  49.  
  50.   <p><img src="imgs/webdesign.png" width="350" height="200" id="imgchange"/></p>
  51.   <p class="description" id="description">Click on one of the site from the menu to learn more.</p>
  52.   <a href="#" id="URL">    <p class="description" id="webdescription" ></p></a>
  53. </div>
  54.  
  55.  
  56. </div>
  57. <div class="legal">Site Created by David Hirst 2011 - 2012. The website is licened under Creative Commons Licence BY, NC, SA. For more infomation click here. The images used on this website are copyright of there respective creators. See source code for more infomation. </div>
  58. </body>
  59. </html>
  60.  
It’s a bit messy as I haven't removed my attempts. Although hope you can understand the end goal.
Dec 13 '11 #1
Share this Question
Share on Google+
2 Replies


100+
P: 1,059
javascript code for accessing href of link is
Expand|Select|Wrap|Line Numbers
  1. anchorobject.href
  2.  
so just do this
Expand|Select|Wrap|Line Numbers
  1. function onclick_button()
  2. {
  3.  anchorobject.href='www.new-link.com'; 
  4. }
  5.  
Dec 13 '11 #2

P: 6
Thanks for your response, could you elaborate a bit? I am having trouble making that command change my link. Can you perhaps create a more detailed example using my code?

Thank you for your help :).
Dec 13 '11 #3

Post your reply

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