The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Creating link in a web "slide show"?
kelpman
post May 30 2012, 09:48 AM
Post #1





Group: Members
Posts: 4
Joined: 30-May 12
Member No.: 17,193



Site address: lonecoast.com

I am trying to make a product display that uses thumbnail images on one side of the page and a large close up of the image when a thumbnail is clicked that will show a large version of the thumbnail. I found a site that explained the code for this, and I got it to work. The code is this:

<head>
<script type="text/javascript">
function changeIt(imageName,objName)
{
var obj = document.getElementById(objName);
var imgTag = "<img src='"+imageName+"' border='0' />";
obj.innerHTML = imgTag;
return;
}
</script>
</head>

<body>
<div id="image1">
<img src="product1.png">
</div>

<a id="one" href="#" onclick="changeIt('product1.png','image1');"> <src="product1thumbnail.png" /></a>
<a id="two" href="#" onclick="changeIt('product2.png','image1');"> <src="product 2thumbnail.png" /></a>
</body>

So, click image "product1thumbnail.png" and the other image switches to product1.png; click "product2thumbnail.png" and the other image changes to product2.png.

This works great. But now the next step is I want the enlarged view of the product to link to its respective site page. How do I make product1.png and product2.png clickable, so that product1.png links to product1.html and product2.png links to product2.html?

This post has been edited by kelpman: May 30 2012, 09:53 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 30 2012, 10:09 AM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,454
Joined: 9-August 06
Member No.: 6



Add the link to the markup that is injected, here:

CODE
var imgTag = "<img src='"+imageName+"' border='0' />";


You need another variable to hold the URL for the link that you can pass from the onclick as you do with the image URL.


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
kelpman
post May 30 2012, 01:06 PM
Post #3





Group: Members
Posts: 4
Joined: 30-May 12
Member No.: 17,193



Thanks for the response.

Could you show me an example of how to do this? I tried putting the link around the part you mentioned:

var imgTag = "<a href="product1.html"><img src='"+imageName+"' border='0' /></a>";

But then the main image wouldn't change when I clicked the thumbnails. I'm sure that's not what you meant when you said add the link to this section of markup. Could you explain what you did mean?

And where do you put the variable to hold the different URLs? (A single example of how this is supposed to look would be very helpful.) Where there is a different link for each different product picture, I realize you have to add something to say where you are linking to for each, but I don't know how to set this for each image or where it should go.

Sorry my HTML skills are so remedial.

This post has been edited by kelpman: May 30 2012, 01:09 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 30 2012, 01:47 PM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,454
Joined: 9-August 06
Member No.: 6



The quotes are messed up. I can't keep track of too many alternating single and double quotes either so I escape the HTML quotes instead.


CODE
var imgTag = '<a href=\"product1.htm\"><img src=\"' + imageName + '\" border=\"0\" /></a>';


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
kelpman
post May 30 2012, 03:03 PM
Post #5





Group: Members
Posts: 4
Joined: 30-May 12
Member No.: 17,193



There we go. That worked.

Ok, so the last part is how do I make it so that the page linked to changes when the product image changes? As it is, when I click a thumbnail to change the product image, all of the product images link to the same page. Do you list all of the pages you are linking to in the section we've been talking about:

var imgTag = '<a href=\"product1.html\" \"product2.html\" \"product3.html\"><img src=\"' + imageName + '\" border=\"0\" /></a>';

Not sure how to work the slashes and quotes exactly. And you must have to connect the id of the link to the id of the thumbnail that is clicked somehow. What does that look like?

I really appreciate all the help you've given me.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 30 2012, 03:31 PM
Post #6


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,454
Joined: 9-August 06
Member No.: 6



QUOTE(kelpman @ May 30 2012, 10:03 PM) *

Do you list all of the pages you are linking to in the section we've been talking about:


Nah. You could pass it to the function from the onclick, same as you do with the URL to the image. That is, you have to add different URLs for each thumbnail just as you have done with the URL to the image already. For example...

CODE
onclick="changeIt('product1.htm','retrot.png','image1');"


Then the function. Lets call the URL link there.

CODE
function changeIt(link,imageName,objName)


And lastly...

CODE
var imgTag = '<a href=\"' + link + '\"><img src=\"' + imageName + '\" border=\"0\" /></a>';


Hope I got that right now. Didn't test it.


CODE
Not sure how to work the slashes and quotes exactly.


You can do it your way, with alternating double and single quotes. Only I think that gets hairy pretty fast. If you escape the quotes that occur in the HTML, JavaScript treats them as any old character and they don't interfere with the script.

You don't need to change your double quotes to single ones, it's just the way I do it. I use double for HTML and single for JS. I think that helps with readability and keeps things separate. This way I always know if a quote is meant to be part of HTML or JS without counting them.

CODE
And you must have to connect the id of the link to the id of the thumbnail that is clicked somehow.  What does that look like?


It should work as you have it.


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
kelpman
post May 30 2012, 08:02 PM
Post #7





Group: Members
Posts: 4
Joined: 30-May 12
Member No.: 17,193



She lives!

Thank you so much for all the help.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 31 2012, 02:33 AM
Post #8


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,454
Joined: 9-August 06
Member No.: 6



Great! You are welcome. smile.gif


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 22nd September 2014 - 07:16 PM