Ask Experts Questions for FREE Help!
  Advanced
Register  |  Log in  
   Ask    
 Answer  
  Help  

Ask QuestionsprogressAnswer QuestionsprogressBuild ReputationprogressBecome an Expert
 
Free Answers in 3 Easy Steps

Register Now
3 Steps

At Ask Me Help Desk you can ask questions in any topic and have them answered for free by our experts. To ask questions or participate in answering them you must register for a free account. By registering you will be able to:
  • Get free answers from experts in any of our 300+ topics.
  • Accept money for answers that you provide.
  • Communicate privately with other members (PM).
  • See fewer ads.

Home > Computers & Technology > Web Development > Graphics   »   I need to overlay icons over an image, how do I do that?

 
Question Tools Search this Question Display Modes
Question
 
 
#1  
Old Sep 11, 2007, 06:39 AM
NeedKarma's Avatar
NeedKarma
Ultra Member
NeedKarma is online now
 
Join Date: Dec 2004
Location: Canada
Posts: 5,909
NeedKarma See this member's comment history on his/her Profile page.NeedKarma See this member's comment history on his/her Profile page.NeedKarma See this member's comment history on his/her Profile page.NeedKarma See this member's comment history on his/her Profile page.NeedKarma See this member's comment history on his/her Profile page.NeedKarma See this member's comment history on his/her Profile page.NeedKarma See this member's comment history on his/her Profile page.NeedKarma See this member's comment history on his/her Profile page.
I need to overlay icons over an image, how do I do that?

I don't want to use Photoshop to merge the images. Here's what I want to do: I have a provinvial map and an icon that I want to moave arounfd the map weekly to show a location. I also would like to keep the alt text feature of the icon. How would I do this with Nvu (or what html coding would allow this)?

Reply With Quote
 
     

Answers
 
 
Old Sep 11, 2007, 08:10 AM   #2  
jstrike
Full Member
jstrike is offline
 
Join Date: May 2007
Location: Wisconsin - Go Packers!
Posts: 389
jstrike See this member's comment history on his/her Profile page.
Regular CSS should suffice.
Set the z-index of icon to something like 10 then use the positional attributes top and left to display the image where you want it.
Attached is a very quick example, change the .txt to .html and you should be all set.
Attached Images
  
Attached Files
File Type: txt viewMap.txt (943 Bytes, 42 views)
  Reply With Quote
 
     
 
 
Old Sep 11, 2007, 08:23 AM   #3  
NeedKarma
Ultra Member
NeedKarma is online now
 
NeedKarma's Avatar
 
Join Date: Dec 2004
Location: Canada
Posts: 5,909
NeedKarma See this member's comment history on his/her Profile page.NeedKarma See this member's comment history on his/her Profile page.NeedKarma See this member's comment history on his/her Profile page.NeedKarma See this member's comment history on his/her Profile page.NeedKarma See this member's comment history on his/her Profile page.NeedKarma See this member's comment history on his/her Profile page.NeedKarma See this member's comment history on his/her Profile page.NeedKarma See this member's comment history on his/her Profile page.
I'm such a noob when it comes to coding html 'cause I rarely have to do it. Through research I figured it was CSS and z-index related but I can't code my way out of a wet paper bag so I found a shareware that will allow me to drag images to overlap others. Thanks, I have the text file and will pore over it to try and understand it whern I'm less under the gun.

Cheers!
  Reply With Quote
 
     
 
 
Old Sep 11, 2007, 10:59 AM   #4  
jstrike
Full Member
jstrike is offline
 
Join Date: May 2007
Location: Wisconsin - Go Packers!
Posts: 389
jstrike See this member's comment history on his/her Profile page.
If you strip the code down to the bare essentials, this is all you need.
Code:
<html> <head> <title>Map Demo</title> <style> .pin { position: absolute; top: 423; left: 428; } </style> </head> <body> <img src="map.gif"/> <img src="pin.gif" class="pin"/> </body> </html>

class="pin" assigns the attributes in the style sheet for .pin to the image.

All you have to do to move the pin around is change top and left attributes in the CSS. The "position: absolute" attribute is necessary to position the pin properly, if you omit it the position attributes are relative to where the image appears on the page rather than the top left corner.

top:0; left:0; is the upper left corner.
  Reply With Quote
 
     
 
 
Old Sep 11, 2007, 11:10 AM   #5  
NeedKarma
Ultra Member
NeedKarma is online now
 
NeedKarma's Avatar
 
Join Date: Dec 2004
Location: Canada
Posts: 5,909
NeedKarma See this member's comment history on his/her Profile page.NeedKarma See this member's comment history on his/her Profile page.NeedKarma See this member's comment history on his/her Profile page.NeedKarma See this member's comment history on his/her Profile page.NeedKarma See this member's comment history on his/her Profile page.NeedKarma See this member's comment history on his/her Profile page.NeedKarma See this member's comment history on his/her Profile page.NeedKarma See this member's comment history on his/her Profile page.
Thanks mate. The "position: absolute" was playing havok with our template in which I inserted the code. I decided ona less pretty route: I'll put the icons on the image in Photoshop, merge it all into one image, then use image mapping to remake the linkable hot spots.
  Reply With Quote
 
     
 
 
Old Sep 11, 2007, 12:23 PM   #6  
jstrike
Full Member
jstrike is offline
 
Join Date: May 2007
Location: Wisconsin - Go Packers!
Posts: 389
jstrike See this member's comment history on his/her Profile page.
Weird...as long as the only thing you apply it to is the icon it shouldn't give you troubles. It also depnds on your target browsers too...I'm not sure how Safari will respond to that code.

Front end work is such a pain....
  Reply With Quote
 
     
 
 
Old Sep 11, 2007, 12:26 PM   #7  
retsoksirhc
Senior Member
retsoksirhc is offline
 
retsoksirhc's Avatar
 
Join Date: Mar 2004
Location: Michigan
Posts: 741
retsoksirhc See this member's comment history on his/her Profile page.
Send a message via AIM to retsoksirhc
Quote:
Originally Posted by jstrike
Weird...as long as the only thing you apply it to is the icon it shouldn't give you troubles. It also depnds on your target browsers too...I'm not sure how Safari will respond to that code.

Front end work is such a pain....
Hehe...that's why I prefer PHP. Just make a template and let someone else edit the actual display of the page, and then you write everything that makes it work.

Speaking of which, if you know how to code in PHP, you could use the image extensions to overlay pictures. I think it's called the GD2 library.
  Reply With Quote
 
     


Question Tools Search this Question
Search this Question:

Advanced Search
Display Modes

 
Similar Sponsors

Similar Questions
Question Asker Topic Answers Last Post
Changing Icons David10 Computers for Beginners 8 Jun 6, 2007 10:45 AM
Where did my icons go? tbud333 Desktops 5 Apr 23, 2007 05:33 AM
Icons ndx Other Computers 0 Aug 3, 2006 05:28 PM
Taskbar Icons Darth_Tanion Windows 4 Dec 1, 2005 02:45 PM
icons stonehenge Computers for Beginners 1 Oct 10, 2004 03:31 PM




Copyright ©2003 - 2007, Ask Me Help Desk.
All times are GMT -8. The time now is 10:10 AM.

Content Relevant URLs by vBSEO 3.0.0 RC6 © 2006, Crawlability, Inc.