HTML Programming
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed Forums > Web Design > HTML Programming
Reload this Page

Clickable images with layers

Discuss Clickable images with layers in the HTML Programming forum on Dev Shed.
Clickable images with layers HTML Programming forum covering discussions of HTML and XHTML, as well as HTML-related issues such as writing W3C Compliant code. Use HyperText Markup Language for building websites.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old January 22nd, 2001, 05:33 AM
kathym kathym is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jan 2001
Location: Netherlands
Posts: 1 kathym User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
I have two layers in my code. The bottom layer contains a jpg-image and the top layer contains a gif-image(?). There is 100% overlap. This works.

Now I want to make the entire image clickable. I tried putting <a href> around the two layers like this:
<a href="/nextpage.asp">
<div id="top" style="position:absolute; left:50px; top:150px; width:180px; height:130px; z-index:2;">
<img src="/images/t1.gif" width="180" height="130" border="0">
</div>
<div id="bottom" style="position:absolute; left:50px; top:150px; width:180px; height:130px; z-index:1;">
<img src="/images/p1.jpg" width="180" height="130" border="0">
</div>
</a>
Don't work.

I tried another <div> around the two layers with the <a href> inside this layer like this:
<div id="clickable">
<a href="/nextpage.asp">
<div id="top" style="position:absolute; left:50px; top:150px; width:180px; height:130px; z-index:2;">
<img src="/images/t1.gif" width="180" height="130" border="0">
</div>
<div id="bottom" style="position:absolute; left:50px; top:150px; width:180px; height:130px; z-index:1;">
<img src="/images/p1.jpg" width="180" height="130" border="0">
</div>
</a>
</div>
Don't work.

Does anyone have a solution or suggestion? Please help me?
Thanx.
Kathy

My code looks like this:
<div id="top" style="position:absolute; left:50px; top:150px; width:180px; height:130px; z-index:2;">
<img src="/images/t1.gif" width="180" height="130" border="0">
</div>
<div id="bottom" style="position:absolute; left:50px; top:150px; width:180px; height:130px; z-index:1;">
<img src="/images/p1.jpg" width="180" height="130" border="0">
</div>
Reply With Quote
  #2  
Old January 22nd, 2001, 06:34 PM
AhrT AhrT is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jan 2001
Location: Australia
Posts: 23 AhrT User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
You should just have to put the HREF around each image like a normal link.

This is a little wierd...what are you trying to do?
Reply With Quote
  #3  
Old January 22nd, 2001, 06:44 PM
JohnB JohnB is offline
Contributing User
Dev Shed Novice (500 - 999 posts)
  
Join Date: Jan 2001
Location: UK
Posts: 527 JohnB User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 9
I assume the image on top is partially transparent. Is this what has caused the confusion? If the top image completely overlaps the lower one it is only possible to click the top one (even if you can see the other through it.)
Just put the A tags around the top image as Ahrt says.
Is this the problem?

John
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > HTML Programming > Clickable images with layers

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump



 Free IT White Papers!
 
How to Present Effectively Online
This white paper offers practical and actionable advice on the key steps that any presenter should consider as they plan and execute a Webinar or online meeting.
 
Open Source Security Myths
Open Source Software (OSS) is computer software whose source code is available to the general public with relaxed or non-existent intellectual property restrictions (or arrangement such as the public domain), and is usually developed with the input of many contributors.
 
Power and Cooling Capacity Management for Data Centers
This paper describes the principles for achieving power and cooling capacity management.
 
Scalable, Fault-Tolerant NAS for Oracle - The Next Generation
For several years NAS has been evolving as a storage alternative for Oracle databases, and for good reason: NAS is quite often the simplest, most cost-effective storage approach for Oracle. Learn about the benefits that HP's approach to scalable NAS brings to Oracle environments in this comprehensive white paper.
 
Understanding Web Application Security Challenges
This white paper discusses many common threats and preventive measures for Web application security, and explains what you can do to help protect your organization.
 

Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2009 by Developer Shed. All rights reserved. DS Cluster 6 hosted by Hostway. 
Stay green...Green IT