473,396 Members | 1,996 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,396 software developers and data experts.

With CSS put one image on top of the other and the bottom on be link

mikek12004
200 100+
I want to place ontop of a picture another which is (gif with transparecy so the image below will be seen at some points) the easiest is put the image below as background but I want this image to also be link any ideas?
Jun 30 '09 #1
2 9724
mikek12004
200 100+
OK found solution with this
Expand|Select|Wrap|Line Numbers
  1. <style type="text/css"> 
  2. .containerdiv { float: left; position: relative; } 
  3. .cornerimage { position: absolute; top: 0; right: 0; } 
  4. </style>
  5. <a href="#">
  6. <div class="containerdiv">
  7.     <img border="0" src="prod_img/01136.jpg" alt="m" title="m" width="170" height="170">
  8.     <img class="cornerimage" border="0" src="new_frame.gif" alt="m" title='m' width="172" height="172">
  9. </div>
  10.  
Jul 1 '09 #2
tharden3
916 512MB
I think I can help you, but help me to clarify the issue. If I understand correctly:

-You have two images that you are layering, one on top of the other.
-The image on the bottom is supposed to be a link
-The top image has a transparent layer that is supposed to make only certain areas of the bottom link 'clickable.'

If you are trying to control the areas of the link that are clickable by the user, there is a better way to do this than layering images. It is called "Image Mapping." I can help you with it, but let me know for sure that what I described above is what you are trying to accomplish before I go into more detail.

Kind regards,
Tim
Jul 1 '09 #3

Sign in to post your reply or Sign up for a free account.

Similar topics

1
by: Allen | last post by:
I am trying to add an additional photo/hyperlink to the company web site (I didn't create it) without any luck. The mouseover feature 'highlights' pics by swapping them with another pic using this...
2
by: Ohaya | last post by:
Hi, We've been having a problem with one particular page that has a button on it, and a "tall" image (top-to-bottom). The button calls some simple Javascript to print the frame in which the...
33
by: Joe | last post by:
I'm designing a company website. I'm relatively new to CSS and I'm having trouble creating what seems to me a very simple design: - body background: fixed full page image - banner: fixed, 100...
1
by: Danny | last post by:
hi, lately i've been working on a website and i have used a bit of javascript although i'm not an expert in this mather. On the page there are 3 thumbnails and when you click on a thumbnail a...
9
by: Rajesh | last post by:
Hi all, Im gonna display a list of images in an aspx page from sql server Db.Each image has a link.When someone clicks the image i want the width and size of the image to be displayed at the...
2
by: george.leithead | last post by:
Hi all, I have a very strange problem! In following Web page (which is generated from a CMS System), the navigation to the left 'dissapears' when you roll the mouse over the links? It does not...
9
panachepad
by: panachepad | last post by:
I arrived here from a websearch that found this thread from your archives: http://www.thescripts.com/forum/thread97805.html It helped me to understand that I am on the right track, but I still have...
5
by: Timeri | last post by:
This is a bit confusing until you actually see what I'm talking about but the main content of my page is not growing with the right column. I want the main content (left/larger column) to take into...
3
by: rassklass | last post by:
HI all, I have designed a site found at www.pickupnewspapers.co.uk/nottinghamshire/index.html but I cant get the footer to sit stil on the page. It is because of the javascript ticker, everytime...
5
matheussousuke
by: matheussousuke | last post by:
Hello, I'm using tiny MCE plugin on my oscommerce and it is inserting my website URL when I use insert image function in the emails. The goal is: Make it send the email with the URL...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.