HOWTO : positioning an image (and its hover) at will on a site
Few days ago, As someone has noted, I put it in the blog and in other parts of the site, an icon shaped house, positioned in the upper left.
Creed (and I hope!) it is clear that indicate the possibility, clicking on it, return to home page.
Because it would be a folly to place the image on every page, I thought I'd put it once, in a file that is included with the command in php include.
So, using a file that is always included on all pages (as the header on the blog, and the file menu.php the left, in all other parts of the site), icon will appear on all pages easily.
However, the problem remains to understand how to place an image in a manner somewhat more refined the simple img, that would only place the image in the place where you use the img tag. But how to place the image into a position at will, perhaps where you can not use the img tag, complete with image hover?
The trick is to use a class in their css stylesheet for position the image so absolute.
You can create your CSS in a class of type:
.home_absolute
{
position: absolute;
top: 182px;
left: 153px;
}
where. home_absolute is the class name assigned to your liking.
position: indicates absolute, precisely, that the image combined with the class. home_absolute must be positioned exclusively according to the directives top and left.
top and left indicate the distance, in pixel, to which the image must be positioned from the upper edge of the screen (in case of top) and the left edge (in case of left).
If you want to use the bottom or right edge, attributes are correct “bottom” and “right”.
At this point you have to go to the page where you want the image to appear in absolutely positioned (in my case in a php file that will be included on all pages automatically) and use this code:
This code, Order, causes the image home_icon.png (the little house at the top left) is linked to the home site index.php and use, for positioning, the class “home_absolute” first created in the style sheet. Alt tags are negligible and border.
How to allow the icon, for example, lights on mouse to draw attention?
This feature is called hover and is realized with the part of the code highlighted here:
onmouseover="this.src='/img/home_icon_hover.png'" onmouseout="this.src='/img/home_icon.png'"
The code indicates that, when the mouse is over the image (over), this changes from home_icon.png to home_icon_hover.png.
The hover image I created in Photoshop, simply taking the original image, and overlaying a red layer with a transparency to your liking.
That’s all, spero serva a qualcuno 🙂