My problem is similar to this one: Place images over another based on that image coordinates , but it doesn't seem to work in VueJS and PrimeVue.
I'm trying to achieve the same thing but using a with multiple tags. Each area should have an image corresponding to a building, or the "chair" in the similar problem. The background image is using this map to know the clickable coordonates, because I want to be able to click on the buildings.
My code is the following:
<div class="map-container">
<img src="../assets/Map_F.png" alt="city" usemap="#city" />
</div>
<map name="city">
<area
class="area"
shape="rect"
coords="1049,347,1104,428"
alt="mainBuilding"
href="mainBuilding.htm"
/>
</map>
.map-container {
position: relative;
}
.area {
position: absolute;
display: block;
background-image: url("../assets/building.png");
background-size: cover;
background-position: center;
width: 160px;
height: 160px;
}
I'd really appreciate your help :D
Related
I'm trying to do something that's probably quite simple, but I can't get my head around it.
I'm trying to overlay a transparent PNG with a fade over the top of another image using CSS if that's at all possible. I'm trying to achieve this result, but utilizing two images, the actual image and then the PNG overlay which creates the fade.
What I'd Like to Achieve
It's on a WordPress website utilizing the featured image system, so I'd like to make it simple for our editors who will be able to simply upload the featured image and have the fade overlay automatically, no need to edit the image etc or create a PNG with the fade already as that'll be a lot of image editing work. Trying to simplify the process.
The website for a look at the code
Any help with this would be amazing! Thank you in advance!
You can use the absolute position property to set the two images on top of each other. To have greater control over the filtering image, you can use the filter property and set the opacity you would like it at. This snippet shows three examples: One where the filtering image is set to 70%, one at 50%, and the other at 0%.
.ref {
position: relative;
height: 200px;
margin-bottom: 10px;
}
.imgMain {
position: absolute;
top: 0px;
left: 0px;
}
.imgFilter {
position: absolute;
top: 0px;
left: 0px;
filter: opacity(70%);
}
.imgFilter2 {
position: absolute;
top: 0px;
left: 0px;
filter: opacity(50%);
}
.imgFilter3 {
position: absolute;
top: 0px;
left: 0px;
filter: opacity(0%);
}
<div class="ref">
<img class="imgMain" src="https://picsum.photos/200?image=985" />
<img class="imgFilter" src="https://picsum.photos/200?image=1022" />
</div>
<div class="ref">
<img class="imgMain" src="https://picsum.photos/200?image=985" />
<img class="imgFilter2" src="https://picsum.photos/200?image=1022" />
</div>
<div class="ref">
<img class="imgMain" src="https://picsum.photos/200?image=985" />
<img class="imgFilter3" src="https://picsum.photos/200?image=1022" />
</div>
So, I currently have an image that is 400x400 pixels. When scaled externally to 200x200 it looks pixilated. I've therefore added it to Wordpress as 400x400 but scaled it down as follows:
However, I'm now trying to add an onmouseover event, with the scaled down image.
It works fine for the normal image, like this:
https://y.png'" onmouseout="this.src='https://x.png'" />
But if I try and scale the image, as follows, it doesn't work:
https://y.png' width="200" height="200"" onmouseout="this.src='https://x.png'" />
Please note I've left the source of the image out and replaced with 'x' and 'y'.
Does anyone know how to resolve this please?
Thanks all.
You could use the :before pseudo selector to show a background image. This will let you shrink down the 400x400 image in CSS. Run this and hover over the element.
.item {
position: relative;
overflow: hidden;
display: inline-block;
}
.item:hover:before {
content: "";
background-image: url(http://placehold.it/400x400);
background-size: 200px;
background-repeat: no-repeat;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<a href="#" class="item">
<img src="http://placehold.it/200x200/8B0AB3/ffffff" />
</a>
You should be able to accomplish this without JavaScript.
Here's a Codepen demo: http://codepen.io/hellojason/pen/GZjpQE
In CSS:
img {
width: 200px;
transition: width 1s;
}
img:hover, img:focus {
width: 400px;
}
<img src="http://placehold.it/400x400" />
Is this what you're after?
Two way for this task you can use
First way using Javascript.
Script :
function bigImg(x) {
x.style.height = "400px";
x.style.width = "400px";
}
function normalImg(x) {
x.style.height = "200px";
x.style.width = "200px";
}
Html :
<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="http://placehold.it/400x400" alt="Smiley" width="32" height="32">
You can call your own function from onmouseover or onmouseout function.
Second way using CSS :
CSS :
#image{
width:200px;
height:200px;
}
#image:hover{
width:400px;
height:400px;
}
Html :
<img border="0" src="http://placehold.it/400x400" alt="Smiley" id="image">
Still in the works but noticed an issue that i cant figure out.. Im pretty good at dabbling around and figuring things out, but do not have any formal education in web development so please be patient with me.
The site I am working on - has an image map with tooltips when you hover specific areas. Works great in FF, doesnt show in IE and Safari.. Any idea on what I am missing? Or a better way to implement? Trying to stay away from JavaScript. Thanks!
My Code
map { position: relative; }
area + span { position: absolute; margin-left: -9999em; }
area:hover + span {
position: absolute; /* can only be positioned relative to the entire map, not the area */
left: 100px;
top: -700px;
z-index: 5000;
color: #ffffff;
background: #ec287a;
border: 1px solid #ffffff;
margin: 0;
width: 600px;
padding: 20px;
}
<p style="text-align: center;"><img src="images/ruffwaytext.png" alt="" /></p>
<center><img src="http://www.skilledgraphics.com/pawshie/images/ruffway.png" width="1200" height="670" usemap="#planetmap" /></center>
<map name="planetmap">
<area shape="rect" coords="377,309,835,615" alt="Ruffway Hills" <a href="ruff" /><span><center><strong>RUFFWAY HILLS<br>Tottie loves stargazing here and pointing out constellations to her friends</strong></center></span>
</map>
Try writing your img tag like this:
<img src="http://www.skilledgraphics.com/pawshie/images/ruffway.png" width="1200" height="670" usemap="#planetmap" title="tooltip text goes here blah blah blah" />
The title attribute included in your < img/> tag should display hovertext of what you include in the quotes. It's supported by IE, FFox, Chrome, Safari, and Opera.
What iam trying to do is to put a with two imagebuttons over another which is used only for the backround-color.
For example:
How can i put the div with the two buttons over the backround exact like in the attached image.
My Code so far:
CSS:
.behind
{
background-color: #e2e0de;
width: 100%;
height: 130px;
z-index: -1;
}
HTML:
<div>
<div class="behind">
<asp:ImageButton ID="btnCheckin" runat="server" ImageUrl="~/image/button1.png"
CssClass="checkinButton" />
<asp:ImageButton ID="btnCheckout" runat="server" ImageUrl="~/image/button2.png"
CssClass="checkoutButton divider" />
</div>
</div>
With my Code is looks like:
Your images are wrapped in the behind div, so they start at the same point your background does. First, move them out:
<div>
<div class="behind"></div>
<asp:ImageButton ID="btnCheckin" runat="server" ImageUrl="~/image/button1.png"
CssClass="checkinButton" />
<asp:ImageButton ID="btnCheckout" runat="server" ImageUrl="~/image/button2.png"
CssClass="checkoutButton divider" />
</div>
Secondly, update the .behind css to start at an absolute position (i.e. not from the top). Notice the position: absolute and the top: 20px elements. Just replace 20px with a value suitable for you, depending on the size of the images.
.behind {
background-color: #e2e0de;
width: 100%;
height: 130px;
z-index: -1;
position: absolute;
top: 20px;
}
Here is a working fiddle, but I've used other images so the value for the top: offset is different.
try this it might help (UNTESTED) :
.checkoutButton
{
position:relative;
top:-value;
z-index: 10;
}
PS : change the value to a a real value for exemple if your buttons height was 136px then give it -3px -> ((buttons height-divs height)/2).
i hope it helps and sorry for not testing it i can't at the moment
I'm trying to write text over an image with the CSS and HTML below but it's not working..
CSS
.social_media_head{
background: url(newsletter_image.gif) no-repeat center;
position: relative;
right: -9px;
height: 0;
width: 325px;
padding: 30px 0 0 5px;
}
.media_name h2{
position: relative;
top: 2px;
}
.media_name {
position: relative;
top: 2px;
}
HTML
<div class="social_media_head">
<h2 class="media_name">Social Media</h2>
</div>
Example jsfiddle
Update
I'm very sorry if the image I'm referring to is wrong. The image I want to put text on is the image on top of the social media icons (facebook, twitter, youtube)...i.e. Image inside class = "social_media_head".
Once again I'm sorry for the confussion.
you can do this by setting z-index of text higher than image and position absolute
.text{
z-index:101;
position:absolute;
/set the position of text you want
}
.image{
z-index:100;
}
and to text above image
.media_name h2 should be h2.media_name
h2.media_name {
color: red;
margin-top: -30px;
top: 2px;
}
full screen Result and fiddle
Try the following to avoid H-tags, and for the box to adjust for height the image is inline rather than as background: (see code here http://jsfiddle.net/jySZB/1/)
(due to update, the old code is removed and kept in the link above - see new link and code below) -
UPDATE: if "over an image" means above rather than on top (which do make more sense in this case), try this code instead:
http://jsfiddle.net/jySZB/2/
HTML:
<div class="social_media_head">
<div>Social Media</div>
<img src="http://satcomng.com/types/twitter.png" alt="" />
<img src="http://satcomng.com/types/twitter.png" alt="" />
<img src="http://satcomng.com/types/twitter.png" alt="" />
</d
CSS:
.social_media_head {
display:block;
}
.social_media_head div {
color:red;
font-size:26px;
font-weight:bold;
font-family:sans-serif;
clear:both;
}
Result:
Tip: as the images are inline here they are easy to convert to click-able links to go the the social sites (I used only one image for example).
Works for me (simplified): http://jsbin.com/uqazel/1/
Maybe you need to set an appropriate height.