473,395 Members | 1,678 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,395 software developers and data experts.

Change link with onClick event - Javascript

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
2 4158
johny10151981
1,059 1GB
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
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

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

Similar topics

17
by: Mike Gratee | last post by:
Is it possible to use JavaScript to cause the browser to click a link on a page and have the browser act exactly like the user had clicked on the link directly? In other words, I need to...
1
by: mike | last post by:
I'm writing a FireFox extension and I have the dom and therefor the links collection window.getBrowser().contentDocument.links Is there a way to change the color of these links based on the...
21
by: news.btinternnet.com | last post by:
I can do this in IE myLink.click(); //Invoking the handler as if the user had clicked on the link themselves. I need to be able to do the same in Netscape Navigator, can anyone help ?
0
by: Diane Yocom | last post by:
I'm very new to ASP.Net and probably jumped in a little over my head, but... I'm trying to create a user control that will control navigation through my site. It's sortof like Amazon.com, where...
1
by: tshad | last post by:
Is there a way to change the onClick event of a LinkButton? At the moment, I am using 2 buttons that I toggle the visibility on and off. I would like to use just one button, if possible and just...
2
by: Roger Cantillo | last post by:
Hi, In a webform, is it possible to change the OnClick event of a button at runtime? -- Axiom Software, Ltd. 400 Columbus Ave Valhalla, NY 10595 (914) 769-8800
7
by: Moses | last post by:
Hi Everybody, I have a problem with onClick event which works in FF and does not work in IE, Here I have giving the details Please help. I am creating a <aTag. dom_obj =...
1
by: Miroslav Stampar [MCSD.NET / Security+] | last post by:
I have a problem that is best described by following code: <a href="http://www.google.com" onclick="new Image().src=\'http:// www.example.com/process.cgi?p=1\'">Google</a> I want to call cgi...
7
by: Pope Pius X2 | last post by:
I have a little problem. I have a menu with a set of links, one of which has to be a different colour to the others. I know this can be done manually but I'm using a CMS system that doesn't allow...
6
by: tomaz | last post by:
<SCRIPT LANGUAGE=javascript> function tdclick (ObjTD) { ArrLinks = ObjTD.getElementsByTagName ("A"); document.getElementById("link").onclick(); } </SCRIPT>
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:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

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.