Why can't I get this floated image to be a link?

Head out to http://loosecannonfitness.com/homepage.php. Underneath "Here's how you're going to eat..." you see a graphic displayed to the right. It's the "Accountability Machine." The code is <a href="link" target="_blank"><img srce="images..." style="float:right;"></a>.


I do the exact same thing with the iphone graphic just below. Same code, but the link doesn't work. Why not and how do I fix it?

Bruce GustPHP DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

i belive image path is correct. can you this image open with picture editor and change to jpg if .png also test please picture size smaller.
Julian HansenCommented:
If you right click the image and inspect element you will see you are actually clicking a div that is placed over the image
<div style="width:502px; height:481px; position:absolute;margin-left:285px; margin-top:780px;background-image:url(images/lcf_watermark.png); background-repeat:no-repeat; z-index:1;"></div>

Open in new window

This is overlaid on the image and is acting as a layer between the mouse and the image. Remove that and the image is clickable.
Bruce GustPHP DeveloperAuthor Commented:
Image paths are correct. At least, based on the fact that you can see them on the page and I double checked the larger image that I'm trying to link my iPhone image to. Thing is, you don't see a "hand" icon appear when you hover over the iphone. That's my dilemma. You can't even access the link dynamic and I don't know why.
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Bruce GustPHP DeveloperAuthor Commented:
Julian. How can I float my image and still preserver the link?
Bruce GustPHP DeveloperAuthor Commented:
And the thing is, I did the same thing on the "Muscular Christianity" image above and it works. Do I have to clear the float? If so, how?
Julian HansenCommented:
Julian. How can I float my image and still preserver the link?
It has nothing to do with floating the image.
As I mentioned in my previous post - you have a <div> that is acting as a barrier between the mouse and the image.

Think of it this way - you have two display cabinets:  one is open and you can reach inside and touch the object inside. The second has a layer of glass in front - the fact that you cannot touch the object is not because of a property of the object but the glass preventing you to get to it.

Why does the link above work?
Answer: because it does not have the layer in front preventing access to it.

Let's look at your markup
<div style="width:502px; height:481px; position:absolute;margin-left:285px; margin-top:780px;background-image:url(images/lcf_watermark.png); background-repeat:no-repeat; z-index:1;"></div>
<a target="_blank" href="http://muscularchristianityonline.com/accountability/"><img border="0" style="float:right;" src="images/accountability.png"></a>
<a target="_blank" href="images/lcf_iphone_big.jpg"><img border="0" style="float:right; width:130px; margin-bottom:10px;" src="images/lcf_iphone_small.jpg"></a>

Open in new window

Do you see that <div> at the beginning - it is positioned absolutely - and it just happens to be positioned right over the iPhone image - it is the glass in the display cabinet.

If you take that <div> out you will see both links perform the same.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Bruce GustPHP DeveloperAuthor Commented:

Do you smell that, Julian? That's the aroma of light bulbs going off!

Thank you, sir!
Julian HansenCommented:
You are welcome.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.