?
Solved

onClick - change href

Posted on 2003-02-23
7
Medium Priority
?
1,988 Views
Last Modified: 2008-06-26
I have a dynamic list of thumbnails, and one cooresponding "medium" sized image that changes onClick... I also need to be able to allow the user to click on this medium sized image to view the "large" image.

My JS function is as -
function showMedium(imageName) {
     document.bigImage.src = imageName;
}

This changes the medium size image, but I have a "a href" around the medium sized image that also needs to change.

<a href='???' target='new'><img name='bigImage' width='400' height='300' src='images/homes/medium/" & house_ID & ".jpg' border='0'></a>

Can I change the "href" value onClick - inside the above function?

Thanks!
0
Comment
Question by:junior2e
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
7 Comments
 

Expert Comment

by:AArnie
ID: 8002391
Sure you can,

Just add an 'id' to the Href...

<A Href="link" id="Href1" Name="Href1">links</A>

then in code...

function changeHref(){
  document.all("Href1").href="newlink"
}

AArnie.
0
 

Expert Comment

by:AArnie
ID: 8002396
Dont forget changeHref() needs to be called from an event some where...

AArnie.
0
 
LVL 5

Accepted Solution

by:
gator4life earned 200 total points
ID: 8002423
You can do this a couple of different ways:

* NOTE: These solutions require a DOM (Document Object Model) compatible browser (e.g. IE5+, NS6+).

(1) Add id="myAnchor" to the <a> tag. Then, change your showMedium() function to this:

function showMedium(imageName, imageHref) {

     with (document) {

          bigImage.src = imageName;
          getElementById('myAnchor').href = imageHref;
     }
}

(2) Don't add anything to the <a> tag. Then, change your showMedium() function to this:

function showMedium(imageName, imageHref) {

     with (document.bigImage) {

          src = imageName;
          parentNode.href = imageHref;
     }
}

Hope this helps you out.

gator4life
(chomp, chomp)
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 5

Expert Comment

by:gator4life
ID: 8002430
AArnie's solution will only work in Internet Explorer 4.0+, since the "all" collection is a Microsoft proprietary extension to the "document" object.  It is not recognized as a standard, and it will not work in any other browsers.  The DOM is an open standard that all modern browsers must conform to.

gator4life
(chomp, chomp)
0
 

Author Comment

by:junior2e
ID: 8005191
awesome, thanks for the help!
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 10083317
*******************************************************
******PLEASE DO NOT ACCEPT THIS COMMENT AS ANSWER******
*******************************************************
No comment has been added lately, so it's time to clean up this TA.
I will leave a recommendation in the Cleanup topic area:
RECOMMENDATION:

 - [Points to gator4life Grade A]

Please leave any comments here within the next seven days.
*******************************************************
******PLEASE DO NOT ACCEPT THIS COMMENT AS ANSWER******
*******************************************************

jAy
EE Cleanup Volunteer
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

764 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question