I know we have <map> and <area> for mapping an image. I want to use polygon mode of this.
But just imagine I have a div element with a background-image and I want to map the background image like <img>.
My shape isn't rectangle or square; it's a polygon. And I don't want to use transparent div trick.
How can I map this?
Use a transparent image (e.g. with opacity:0) with an imagemaps, positioned over your div. This effect is how the ImageMapster plugin works.
I wrote a blog post that explains how these effects work. The long and short of it is, you can use HTML image maps on top of anything you want. All you need to do is to ensure that the img has the highest z-index, and is transparent, and is positioned absolutely on top of the element you want your end-user to actually see. If it's transparent, the end-user will only see what's behind it, giving you total flexibility to use the polygon position tracking capabilities of imagemaps on to of any other kind of elementsuch as a div.
Example:
<div id="container">
<img style="position: absolute; top: 0; left: 0; opacity: 0;
width: 100px; height: 100px;"
src="/placeholder.jpg"
usemap="#my-image-map">
<div style="position: absolute; top: 0; left:0;
background-image: url(/some-100-by-100-pixel-image.jpg)">
</div>
Related
The picture I'm trying to paint is this:
I have an image of a painting in the center of my page. When I hover over the painting, I want an info icon (a small "i") to appear anchored in the top right of my image. I've placed the "i" icon simply on top of the other image. I know this is incorrect, but I don't know how to anchor it relative to the dimensions of the painting image.
Furthermore, when I hover over the "i", I want it to popup a small box with 3 lines of text (for the title of the painting, the size, and the year it was made.)
I've tried a few different methods, but none of them seem to work, so I strip the code back down to this before I try something else.
<div style="position: relative; left: 0; top: 0;">
<img src="Placeholder.jpg" style="position: relative; top 0; left: 0;"/>
<img src="info.gif" style="position: absolute; top: 30px; right:320px"/>
</div>
Are you trying to do this purely through CSS? If the info.gif was a child element of the placeholder.jpg it would work, and you could do this by swapping the img for a div or span using the background-image: url() CSS selector and then using the:
img[src=Placeholder.jpg]:hover {
img[src=info.gif] {
display: block;
}
}
However, I think you're correct in using the correct image markup and you can do what you are trying to achieve with the:
.hover() // functionality
I have attached a JSFiddle here and attached the jQuery hover event to give you a bit more background.
I have used example code with an image, and an info image showing that hovering on the picture shows the icon, and then hiding the icon when the user leaves the picture.
Hope this helps!
when clip property of the css then the image is clipped but the problem is, the clipped part of image reserve the space.Is there any way to remove that space after image is clipped.
HTML Code
// image with id: clip2
<img id="clip2" src="image/background_right.png" style="height:100%; width:100%; max-width:350px; float:left;"/>
CSS Code
// code for clipping image
#clip2
{
position: absolute;
clip: rect(0px, 150px,600px,0px);
}
The clip property has been deprecated, so it may never work reliably.
If you could, please add a bit more detail about your intended goals, and maybe a screenshot or a sample of your code so we can show you some alternatives which work with modern standards.
clip (and the more recent clip-path) merely defines a path for clipping, it doesn't change the width/height of the element being clipped.
You can achieve what you want by using a div element with the size you want and set the image as a background image.
#clip2
{
position: absolute;
background-image: url("image/background_right.png");
width: 150px;
height: 600px;
}
<div id="clip2"/>
I'm wondering if this is possible, the ability to set the background position of an image to the top left of the html document, not the top left of the element it's the background of.
Psuedo-code
body {
background-image: url(someurlhere);
background-position: top left;
}
element {
background-image: url(sameurlhere);
background-position: top left /*Relative to body not element*/;
}
If I need to provide anything else to this question let me know and I'll amend it, but I'm sure it's pretty straight forward.
Edit: I can't use absolute positioning, I'm loading dynamic content and I want a tiled image to fit the background of several elements to make the illusion of holes in the page.
Edit 2: Here are some pictures to better explain the problem.
Picture 1: Notice the repeated pattern in the header elements. http://i.imgur.com/3lWguRE.png
Picture 2:This variation is what I aim to achieve. http://i.imgur.com/WtOeCQ2.png
The first question would be why you are not just setting the background image on the body element.
But if that's not appropriate, you have the option to set a background image on an element to fixed, in which case it will be fixed to the top left of the browser window and won't scroll.
element {background: url(image.fig) repeat fixed;}
However, the background will only show on the element it's attached to, even though it starts at the top left corner of the screen. (This is handy for parallax effects.)
EDIT: As a side note, if you are using the longhand background properties, fixed is set with
background-attachment: fixed;
All you have to do is wrap your element in a div absolute, and position it as you wish.
Can you provide some more information on the context of the element? Does it have any positioning set? Where is it in the document? It's a little unclear to me what exactly you are trying to accomplish.
Would putting the background on the body work?
This would set the background at the top left, but I doubt this is actually what you are trying to accomplish:
<div class="test">
</div>
.test:before {
content: "";
position: absolute;
top: 0;
left: 0;
background: url(http://i1112.photobucket.com/albums/k497/animalsbeingdicks/abd-318.gif);
width: 352px;
height: 263px;
}
http://jsbin.com/imurah/1/
I have been playing around with text in the canvas, and although it is easy to draw, it is not easy to interact with. I began implementing keyboard press functionality to update text on the canvas, but then gave up when I realized I would have to incorporate cut,copy,past and undo functionality.
Is there anyway to "float" html elements on top of eachother? For example can I float a text field ontop of certain parts of my canvas, disable the border and set the color to the canvas color?
Thank You
You may use the CSS position: absolute property with z-index: 1 to place elements above the canvas.
EDIT: added an example: here the div that contains "1234" floats on top of the div that contains "abcd" (that could be replaced with a canvas element)
<div id="wrapper">
<div style="position: absolute; left: 10px; top: 10px; width:200px; height:100px; background-color: yellow;">
abcd
</div>
<div style="position: absolute; z-index: 1; left: 50px; top: 20px; width:100px; height:20px; background-color: green;">
1234
</div>
</div>
You can use 'somehow' invisible text-control to gain control over the text being input and copy innerHTML on the canvas on keypress. Im doing similar stuff, copying computed font css attributes of the text present in DOM and more. Z-indexes work pretty straight. The setFocus() function can help too.
I want to create a headline (h2) with an image at the right-most area of the bounding box. I have the layout almost right except I can't push the image a little bit to the right of the element's bounding box -- how would I tweak my css so it is displayed correctly?
I'm trying to do something like this:
[{someHeadLineText}{dynamic space }{image}{5px space}]
where the [] indicate the total available width of my content.
Html:
<div class="primaryHeader">
<h2>News</h2>
</div>
Css:
.primaryHeader h2 {
background-color: green; /* the header looks like a box */
color: black;
background: transparent url(../images/edit.png) no-repeat right center;
border: 1px solid red;
}
I am placing the image to the right of my h2 element and centered vertically -- but how do I adjust the placement of the background image?
I'm afraid I think you can't. You can use either right or a pixel value as the image's x-position but that pixel value will always be relative to the left corner of the bounding box. Adding padding won't help either, it will just extend the bounding box further.
The only solution I know for this is either adding the shift to the image itself, or using an absolutely positioned element (with a slight offset) hovering behind the element - but that would require you know the width and height in advance.
Edit: evil, hacky idea. I have no time to try this out right now, but it should work if the h2 is a display: block.
Give the h2 a position: relative.
Place a div or other element inside the h2 with the following:
position: absolute;
left: 0px;
top: 0px;
right: 5px; /* This is the shift */
bottom: 0px;
background-image: url(...);
background-position: right center;
background-repeat: no-repeat;
z-index: -1; /* I don't know whether this will overwrite the h2's content */
this could lead to the desired effect, I'm not sure as I have not tried.
The element may overlay the h2's other content, in which case you would have to put the rest into a <span> element with position: relative and z-index: 1.
It's really hacky. Better put the padding into the image itself, much cleaner.
Can you add padding pixels in the image itself?
You could ditch the background image and use an image instead.
<div class="primaryHeader" style="padding-right: 5px;">
<img src="../images/edit.png" alt="" style="float: right;" />
<h2>News</h2>
</div>
You can look into CSS3 background positioning. It works in all the modern browsers (not IE, of course).