how to make a jpg clickable to another section on the website

[proverbs]

hi everyone! i downloaded a Facebook Page template recently. the template works great, but i wanted to add one thing.

here is the demo of the code:

http://www.facebooktemplates2u.com/demo/2011/02/best_business/

here is where you can download the template:

http://www.schoolofrok.com/facebook/html.zip/

anyhow, the part i want to change is the link that directs it to the content. for example, when you scroll over About Us, the little pop up from the bottom comes out. when you click it, it takes you to the About Us content. what i wanted to do, is make it so that when you click the whole jpg, it can take you to the content also. i noticed that the small link that pops up is too tiny and people get confused on where to click. any suggestions? TIA!

[LearningCoder]

Both your links do not work.

If I understand your goal correctly, you could give your content a name like so: <div name="myName">Content</div>, then in your 'About Us' anchor tag, you could set the href attribute to the value of the name of the area you wish to browse to (in this case it was myName) but you also add the pound sign infront of the name.

Your code could read:

<a href="#myName">About Us</a>

<div name="myName">Content</div>

This way, when you click the About Us link, it will send the user directly to that part of your page.

Hope I have helped you out but it's hard to know without seeing a visual or some code.

Regards,

LC.

[proverbs]

Both your links do not work.

If I understand your goal correctly, you could give your content a name like so: <div name="myName">Content</div>, then in your 'About Us' anchor tag, you could set the href attribute to the value of the name of the area you wish to browse to (in this case it was myName) but you also add the pound sign infront of the name.

Your code could read:

<a href="#myName">About Us</a>

<div name="myName">Content</div>

This way, when you click the About Us link, it will send the user directly to that part of your page.

Hope I have helped you out but it's hard to know without seeing a visual or some code.

Regards,

LC.

thanks for your reply LearningCoder!
hmmm.. so would i use both those codes or am i swapping them?
what i'm trying to do is make it so when the jpg drops down after you put the cursor over About Us, the jpg file is clickable. if you click it it takes you to the About Us content. currently, you have to click the little About Us text on the small pop up sub menu to go to the content.

[proverbs]

i can post the code, but its so darn long... its probably better just to download it.

[proverbs]

I've been trying to figure this out for the past several hours. Arggggg!!! I'm pulling out my hair over here! Can anyone help me out???

[DanInMa]

post a proper link if you want some help.

[proverbs]

post a proper link if you want some help.

oops! sorry about that. thanks for the heads up!

[LearningCoder]

Ok, so I've just opened up the iframe (your sliding images) and looked at the source. I can't see any CSS at the moment, but what I would do is put the sliding image inside an anchor tag <a></a>, so that when it scrolls downs, it can be clicked.

1)Go to your source code.
2)Look for the iframe (which is set to an external link).
3)Open that website in your browser.
4)Look at the source code for that.
5)This is where you will find the HTML relating to your issue.
6)Try putting the image inside an anchor tag.

I can see that the content opens up right next to the relative link so I don't think you would need to use the code I posted above. I actually created a very similar effect using jQuery, except the images slide from left to right and the information is revealed 'underneath' the original image.

Only problem I see is I don't know how much control you have over this piece of work so whether you are able to edit the code or not, I'm not sure. If you are interested in building the site yourself, you could create all this with a few lines of HTML and CSS, then you'd need a few lines of jQuery to add the image rolling effect.

Regards,

LC.

[proverbs]

thanks for the reply LC.

well, I'm not a web programmer by any means. i just downloaded the template and changed the jpg files and changed the content. with basic websites, i can always manipulate it the way i want it. however, i can't seem to pinpoint where i have to change the code.

where would i insert the anchor code? would i have to use an aref or img src code?

<div id="cc_menu" class="cc_menu">
			<div class="cc_item" style="z-index:4;">
				<img src="images/1.jpg" alt="image" style="top:0px" />
				<span class="cc_title">About Us</span>
				<div class="cc_submenu">
					<ul style="height:151px">
						<li class="cc_content_1">About Us</li>
					</ul>
				</div>
			</div>
			<div class="cc_item service" style="z-index:3">
				<img src="images/2.jpg" alt="image" />
				<span class="cc_title">Services</span>
				<div class="cc_submenu">
					<ul>
						<li class="cc_content_2">Services</li>
					</ul>
				</div>
			</div>
			<div class="cc_item products" style="z-index:2;">
				<img src="images/3.jpg" alt="image" />
				<span class="cc_title">Products</span>
				<div class="cc_submenu">
					<ul>
						<li class="cc_content_3">Products</li>
					</ul>
				</div>
			</div>
			<div class="cc_item contacts" style="z-index:1;">
				<img src="images/4.jpg" alt="image" />
				<span class="cc_title">Contacts</span>
				<div class="cc_submenu">
					<ul>
						<li class="cc_content_4">Contacts</li>
					</ul>
				</div>
			</div>
			
			<div id="cc_content" class="cc_content">
				<span id="cc_back" class="cc_back">&lt;&lt; Go back</span>

[LearningCoder]

When you hover over About Us, the image which slides down is '1.jpg'.

Find this line in the source:

<img src="images/1.jpg" alt="image" style="top:0px" />

Just change it to

<a href=""><img src="images/1.jpg" alt="image" style="top:0px" /></a>

and check the results, like I said it's a bit of trial and error.

Here is something I have created simply though watching various tuts on jQuery, which is very useful when it comes to manipulating the CSS in your site.

HTML:

<div id="container">
     <div class="wrap">
	     <img src="images/steback.png" alt="image" height="300px" width="200px" />
	     <img src="images/ste.jpg" class="front" alt="image" height="300px" width="200px" />
	 </div>
	 <div class="wrap">
	     <img src="images/monkeeback.png" alt="image" height="300px" width="200px" />
		 <img src="images/monkee.jpg" class="front" alt="image" height="300px" width="200px" />
	 </div>
 </div>

CSS:

#container {width: 800px;
					 margin-left: auto;
					 margin-right: auto;
					 margin-top: 50px;
					 text-align: center;
					 border: 2px solid black;}
		 
		 .wrap {width: 200px;
		        height: 300px;
				position: relative;
				overflow: hidden;
				float: left;
				padding: 0px;
				margin-right: 20px;}
				
		 img {position: absolute;
		      top: 0; left: 0;}

jQuery:

$(function() {
		     $('.wrap').hover(function() {
			     $(this).children('.front').stop().animate({ "left" : "200px"}, 700);
			 }, function() {
			     $(this).children('.front').stop().animate({ "left" : "0px" }, 300);  
		     });
		 });

What I have done is created a main div, and created 2 divs inside. Then, using CSS set the smaller divs to widths with margins and positioned relative. Then, using jQuery, when the .wrap element is hovered over, using the 'this' keyword to determine which element was hovered over, gets the child/ren of that element(which are the two images, and animates the image to move from the left 200 pixels 'left' : '200px'. As the image slides from the left, it also disappears to create a 'curtain effect'. This is set in the CSS with the overflow being hidden. Obviously just change this code to suit your needs so you want it from top to bottom so you could do this:

$(function() {
		     $('.wrap').hover(function() {
			     $(this).children('.front').stop().animate({ "top" : "200px"}, 700);
			 }, function() {
			     $(this).children('.front').stop().animate({ "top" : "0px" }, 300);  
		     });
		 });

On a side note, if you want it to go from top to bottom, set the animation to the same amount of pixels as the height of your given element.

Regards,

LC.

[proverbs]

LC, thanks so much for taking time to help me. Unfortunately, i still can't get the dang thing to work.

i tried the code, and when i mouse over the picture, it changes to the pointer (because of the a href), but nothing happens when i click it.

its so frustrating because i don't understand why it won't go there. if it were a normal link to a different page it wouldn't be a problem.

your personal code looks great, but i wouldn't be able to build it from scratch. I'm still pretty much a newb

[LearningCoder]

No problem, I usually like to browse other new threads to see if I can help out.

The reason nothing happens when you click it is because the href is not set to take you anywhere, but this is where I am getting confused. I'm not sure if you have to connect the href attribute with a function from the jQuery you have there.

To be honest, I cannot help you anymore as I am simply not good enough at this moment in time. Hopefully someone with a bit more knowledge on your subject can help you out.

Good luck with your code.

Sorry bud,

LC.

[proverbs]

yea, i tried inserting cc_item and cc_content_1 inside the href, but nothing happens. so the direct code that links About Us to the content is in the JS file? theres actually no code in the source that tells you what happens when you click About Us? confusing.

anyways, hopefully some jQuery expert comes along. thanks again for your help.

[LearningCoder]

There are click functions present, but all the animation you are getting with the other links being 'pushed' and hidden and the relative div appearing with the content is all to do with the jQuery and like I say it's far too complicated for me personally. I'm very suprised no-one else has commented yet

Good luck for the rest,

LC.

[proverbs]

i guess its more difficult than i expected