 |
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)?
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.
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!
If you strip the code down to the bare essentials, this is all you need.
class="pin" assigns the attributes in the style sheet for .pin to the image.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>
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.
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.
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.Quote:
Originally Posted by jstrike
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.
| All times are GMT -7. The time now is 12:55 AM. |