I want to add a text and link to both the sign boards here in this image (separately for both). I am trying to use the <map> <area> rule and I need to place the coordinates of the two rectangle boxes there so that once a user clicks on that board or text he will be redirected to some another page. Now the problem is that I am not sure from where to find the exact coordinates of the image here and how? If anyone can help then please help.
Here is the code I am using
<img src="image link here" usemap="#mapname">
<map name="mapname">
<area shape="rect" coords="" href="http://www.google.com" alt="TEST">
</map>
I'm working on something similar, but I wanted to make it responsive - not if you zoom in, image will be bigger and areas too. I didn't use <map>, because the coords are absolute. I used this:
<div id="mapdiv">
<img src="link" id="imgmap" alt="" />
<div id="box1">Here is the text</div>
<div id="box2" onclick="alert('You can use js too')"></div>
</div>
And CSS:
#imgmap {
width: 100%;
}
div#mapdiv {
position: relative; /* thanks to this... */
}
div#menu div {
position: absolute; /* ...and this are boxes positioned relatively inside the imgdiv */
border: 1px dashed blue; /* for finding coords, remove after you are done */
}
div#box1 {
left: 21%; /* my coords, make your own by trying and trying... */
top: 26.5%;
height: 5%;
width: 6.5%
}
div#box2 {
left: 7.5%;
top: 66.2%;
height: 24.5%;
width: 31.5%;
}
if you want to add text, then you better use real links and set them on top of your areas wich are quiet good rectangle.
example:
.map {
position: relative;
}
.map img {
display: block;
width: 100%;
}
.map a {
position: absolute;
top: 48.6%;
left: 9.118%;
width: 19.8%;
height: 19%;
transform: rotate(-1.375deg);
border-radius: 50% 50% 0px 0 / 0.25vw;
transition: 0.5s;
color:#3F4754;
display:flex;
align-items:center;
justify-content:center;
font-size:4vw;
font-weight:bold;
font-family:courier;
font-variant:small-caps;
text-decoration:none;
text-shadow:-2px -2px 2px black
}
.map a + a {
top: 48%;
left: 70%;
transform: rotate(3deg);
transform-origin: bottom right
}
a:hover {
color: white;
background:linear-gradient(to bottom left, rgba(0, 0, 0, 0.5), transparent);
text-shadow:2px 2px 2px black
}
<div class="map">
<img src="https://i.stack.imgur.com/mDEuy.jpg" />
hover me
or me
</div>
use your own style and ids or class
I use a chrome extension I got called Page Ruler. What I do is use the extension to draw a rectangle from the pixel with the coordinate 0,0 to a target pixel. The bar at the top shows the width and height of the rectangle. There are also other tools, such as Meazure, which can do the same thing.
You can use the mouse events clientX, clientY https://www.w3schools.com/jsref/event_clientx.asp
When you use onmousemove it shows the coordinates
<!DOCTYPE html>
<html>
<body>
<img src="https://i.stack.imgur.com/mDEuy.jpg" usemap="#mapname"
onmousemove="showCoords(event)">
<map name="mapname">
<area shape="rect" coords="" href="http://www.google.com" alt="TEST">
</map>
</img>
<p id="demo"></p>
<script>
function showCoords(event) {
var x = event.clientX;
var y = event.clientY;
var coords = "X coords: " + x + ", Y coords: " + y;
document.getElementById("demo").innerHTML = coords;
}
</script>
</body>
</html>
$(document).ready(function() {
$("img").on("click", function(e) {
bounds=this.getBoundingClientRect();
var l = bounds.left;
var t = bounds.top;
var x = e.pageX - l;
var y = e.pageY - t;
var cw = this.clientWidth;
var ch = this.clientHeight;
var nw = this.naturalWidth;
var nh = this.naturalHeight;
var px = x/cw*iw;
var py = y/ch*ih;
});
});
Related
In Wordpress, I wanted to duplicate the images of the posts, so I can set one of them as background, and then blur it, creating a nice effect, without having to change all my html structure.
How can I do that, if possible, with PHP? I tried long time ago to achieve with JQuery, but at that time I didn't manage to make it:
$(".post-cover").each(function(){
var img = $(this).find("img");
$(this).css({
"background-image": "url('"+img.prop("src")+"')",
//Any other CSS background propriety
//If your div don't have a fixed width and height
width: img.width(),
height: img.height()
});
img.remove();
});
If I used Jquery, where should I implement it?
My structure is
<div class="post-cover">
<img src="#"/>
</div>
and the final result should be something like:
For this to work you need to set the img source as the background of the container div and blur it. However, as this will blur all child elements, you will need to move the original img element outside of the .post-cover and position it absolutely so that it is still sharp. Try this:
$(".post-cover").each(function() {
var $cover = $(this);
var $img = $cover.find("img");
$cover.css({
backgroundImage: "url('" + $img.prop("src") + "')",
width: $img.width(),
height: $img.height()
});
$img.insertAfter(this).css({
position: 'absolute',
top: $cover.offset().top,
left: $cover.offset().left
})
});
.post-cover {
-webkit-filter: blur(10px);
filter: blur(15px);
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post-cover">
<img src="https://i.imgur.com/mE2HyxV.jpg" />
</div>
Could be like this:
$( document ).ready(function() {
$('.post-cover img').each(function() {
$(this).before('<img src="'+ $(this).attr('src')+'" class="blur">');
});
});
.post-cover {
position: relative;
}
.post-cover img {
width: 250px;
height: auto;
display: block;
position: relative;
padding: 50px;
}
.post-cover img.blur {
content: '';
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
-webkit-filter: blur(25px);
filter: blur(25px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post-cover">
<img src="https://placeimg.com/640/480/arch">
</div>
So i have this problem. I want to center my flyout but here is the catch. I do not know what the size of the picture will be since it is a picture uploaded by a user. I also don't what the picture disappearing if i make the screen smaller. I tried to set position to be relative but then it pushes my images / texts behind the flyout down.
<div id="imageFlyout<?=$step['order']+1?>" class="popUpWrapper" style="display:none;position:absolute;top:100px;left:<script type="text/JavaScript">
int w = screen.width;
<?php $tempSize=getimagesize("guidebook_images/".$step['attachment']); if($tempSize[0] > 935){?>w/2<?php }else{?>w-<?php echo($tempSize[0]/2);}?></script>px;">
Centering in HTML is an easy two step process:
Give the parent:
text-align:center;
Give the element:
margin:auto;
Demo: http://jsfiddle.net/uriahjamesgd_73/kNFGj/22/
I used the CSS values VW (viewer width) & VH (viewer height) to specify that the flyout be a percentage of whatever the viewport is at a given instance. Hopefully this allows resizing of the viewport in mobile devices.
<!-- HTML -->
<div class="wrap">
<div class="product">
<span class="flyOut"></span>
</div>
</div>
/* CSS */
body { margin: 50px; }
.wrap { position: relative; }
.product { background-color: #555; position: relative; width: 100px; height: 75px; }
span.flyOut { display: none; background-color: #ddd; position: absolute; width: 50vw; height: 37.5vh; left: 100%; }
.product:hover > span.flyOut { display: inline-block; }
I want to know how to show a zoom button over an image in html when mouse hovers over it.
till now i have tried this
<img src="images/zoom.jpg" width="40" height="40" border="0" style="background:URL(http://news_image/<?php echo $getrs['image']; ?>) ;" />
But here the main problem is that how to set size of the background image and how to show the zoom.jpg when only mouse hovers it otherwise not. Also how to place the zoom.jpg in the lower right hand side of the background image when mouse hovers the background image.
I had asked this question before but i was not specific at that time but now i had tried to be specific.
Please help me in this matter.
Thanks
Somdeb
Consider this simple, clean and elegant example using minimal markup:
HTML:
<a href="#" class="zoom">
<span></span>
<img src="/path/to/image.jpg" />
</a>
CSS:
.zoom {
border: 5px solid #000;
display: inline-block;
position: relative;
}
.zoom span {
background: url(http://i.imgur.com/T7yFo.png) no-repeat;
bottom: 0;
display: block;
height: 20px;
position: absolute;
right: 0;
width: 20px;
}
img {
height: auto;
max-width: 100%;
}
If you'd rather only show the magnifying glass on :hover, change the CSS to reflect:
.zoom span {
...
display: none;
...
}
.zoom:hover span {
display: block;
right: center;
top: center;
}
This will place the zoom image in the middle of the image on :hover.
As an added bonus, you can change the mouse cursor to a custom image (e.g. a magnifying glass), further suggesting to the user that the image can be enlarged.
.zoom img:hover {
cursor: url(http://i.imgur.com/T7yFo.png), -moz-zoom-in;
}
This should do the trick:
<style>
a.image {
display: block; /* So that you can set a size. */
width: 100px;
height: 100px;
} a.image div.zoom {
display: none;
width: 100px;
height: 100px;
background-image: url(URL_TO_ZOOM_PICTURE);
background-repeat: no-repeat;
background-position: center center;
} a.image:hover div.zoom {
display: block;
}
</style>
<a class="image" href="<?php echo $getrs['image']; ?>"
style="background:URL(http://news_image/<?php echo $getrs['image']; ?>);">
<div class=".zoom"><!-- --></div>
</a>
The a tag holds the URL and the image. The zoom button is placed within the tag, and I have left it as a simple empty div tag which holds the image. Once the a tag gets hovered over, the tag will appear showing the image. The best about using this is that the zoom button can be transparent, and be placed simply in the middle of the image, and you don't have to worry about any JavaScript.
CSS:
img {
transition: -webkit-transform 0.25s ease;
transition: transform 0.25s ease;
}
img:active {
-webkit-transform: scale(2);
transform: scale(2);
}
This is correct in CSS http://jsfiddle.net/8c7Vn/301/ || UP
also this CSS Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.pic{
width:50px;
height:50px;
}
.picbig{
position: absolute;
width:0px;
-webkit-transition:width 0.3s linear 0s;
transition:width 0.3s linear 0s;
z-index:10;
}
.pic:hover + .picbig{
width:200px;
}
</style>
</head>
<body>
<img class="pic" src="adam_khoury.jpg" alt="Adam">
<img class="picbig" src="adam_khoury.jpg" alt="Adam">
<img class="pic" src="heart.png" alt="heart">
<img class="picbig" src="heart.png" alt="heart">
<img class="pic" src="hardhat.jpg" alt="hardhat">
<img class="picbig" src="hardhat.jpg" alt="hardhat">
</body>
</html>
Edit: Just realized you don't want to resize the image on the page.
You will probably want something like:
<a class="ImageZoom" href="news_image/<?php echo $getrs['image']; ?>">
<img src="yourimage.ext" height="40" width="40" />
<div class="Zoom"><img src="images/zoom.jpg" /></div>
</a>
<style>
.ImageZoom{
display:block;
position:relative;
}
.ImageZoom:hover .Zoom {
display:block;
}
.Zoom {
display:none;
position:absolute
bottom:0;
right:0;
}
</style>
I have an advent/christmas calendar. Everyday is another picture with one more door opened. To make these regions clickable I used CSS and IDs like this:
CSS:
ul#doorregions {
list-style: none;
background: url(<?php echo($pictureoftheday); ?>) no-repeat 0 0;
position: relative;
width: 950px;
height: 575px;
margin: 0;
padding: 0;
}
ul#doorregionsli {
border: 0px ;
position: absolute;
}
#door1 {
left: 135px;
top: 192px;
width: 73px;
height: 116px;
}
#door2 {
left: 135px;
top: 192px;
width: 73px;
height: 116px;
}
HTML:
<ul id="doorregions">
<li id="door1">
<span><a href="<?php echo($december1); ?>">
<img src="blankpixel.gif" width="100%" height="100%">
</a></span></li>
<li id="door2">
<span><a href="<?php echo($december2); ?>">
<img src="blankpixel.gif" width="100%" height="100%">
</a></span></li>
</ul>
So far all works fine. Now an image should, on rollover, show a door near the mouse cursor while it is over the region. I tried something like:
#door1 a:hover {
display:block;
background-image: url(OTHERPICTURE1.jpg);
}
But this method doesn't work if the other picture is bigger than the door region. Any other idea? I can't slice the background image, that is not an option.
It's not necessary to follow the mouse in the region, the position can be fixed. But this second image should only apear while the mouse is over the door (or maybe on the second picture).
The BEST solution would be something like this: http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/
But in this case it is the same picuture which zooms in. I have only blank gifs. What will be the smartest idea?
If you are willing to use jQuery, you could create a hidden div for each "door". Then, bind a hover event to the a tag and set the visibility of the div to true. Like such:
$("li #door1 a").hover(function () {
$("div #door1image", this).fadeIn("fast");
}, function () {
$("div #door1image", this).fadeOut("fast");
});
The "door1image" is id of the div that would be hidden from the start (display:none). It could be placed inside the li with the a tag for each door.
Code is not tested and may not be perfect, but hopefully you get the idea.
What about setting the door divs to position: relative then do an absolutely positioned div with negative bottom and rightplacement example:
#door1 {
Position: relative;
}
#door1 .door {
Position: absolute;
Bottom: -25;
Right:-25;
Display:none;
}
Then use javascript to change the display property back to normal.
Hope this helps.
I haven't been able to get fades or animation to work like I want it to, but here is how I would make the popup images. Note: that instead of using a blank image, the image should be the image you want to display on hovering.
CSS
ul#doorregions {
list-style: none;
background: url(<?php echo($pictureoftheday); ?>) no-repeat 0 0;
position: relative;
width: 950px;
height: 575px;
margin: 0;
padding: 0;
}
ul#doorregions li {
border: 0px ;
position: absolute;
}
#door1 {
left: 135px;
top: 192px;
}
#door2 {
left: 225px;
top: 192px;
}
.doors {
background: #444;
width: 73px;
height: 116px;
}
.popup {
position: absolute;
top: 0;
left: -99999px;
border: 0px;
z-index: 9;
}
HTML
<ul id="doorregions">
<li id="door1" class="doors">
<span><a href="<?php echo($december1); ?>">
<img class="popup" src="<?php echo($december1Image); ?>">
</a></span>
</li>
<li id="door2" class="doors">
<span><a href="<?php echo($december2); ?>">
<img class="popup" src="<?php echo($december2Image); ?>">
</a></span>
</li>
</ul>
Script
// using window.load to ensure all images are loaded
$(window).load(function(){
$('.doors').each(function(){
var popup = $(this).find('.popup');
// find middle of door
var doorY = $(this).height()/2;
var doorX = $(this).width()/2;
// position middle of popup to middle of door
var popY = doorY - popup.height()/2;
var popX = doorX - popup.width()/2;
popup
.hide()
.css({top: popY, left: popX });
$(this).hover(function(){
popup.show();
},function(){
popup.hide();
})
})
})
I'm not entirely sure of what you're needing, but the following code duplicates the functionality of the "Fancy Thumbnail" link you provided. Hopefully it will help!
<!DOCTYPE html>
<style>
ul {
list-style: none;
margin: 50px;
padding: 0;
}
li {
width: 300px;
height: 300px;
float: left;
border: 3px outset gray;
background: white;
}
li:hover {
margin: -50px;
width: 400px;
height: 400px;
z-index: 2;
position: relative;
}
</style>
<ul>
<li>foo</li>
<li>foo</li>
<li>foo</li>
<li>foo</li>
<li>foo</li>
<li>foo</li>
<li>foo</li>
<li>foo</li>
<li>foo</li>
</ul>
I want to center an image in an area, without resizing... I am using HTML.
Example:
I have an image <img src='img1.png' width='64' height='64'> - the image is actually 64x64. It displays perfectly.
Now, I have another image <img src='img2.png' width='64' height='64'> however, the image is not as big as it should be, its 32x32 - what happens here is it resizes the image to 64x64 and makes it look like $%^&.
How do I make images smaller then the desired width and height centered in the 'img' area without any resizing what so ever?
What you will need is something like this:
<div class="box">
<img src="whatever size image you'd like" />
</div>
And for the styling (in an external stylesheet, natch) you'd apply:
/* Image centering */
div.box {
border: 1px black solid;
height: 64px;
width: 64px;
background: #444;
display: table-cell;
vertical-align: middle;
}
.box img {
display:block;
margin: 0px auto;
}
This works for images with dimensions <= 64x64px, and is easily modifiable to work with larger pics. The key elements here are
set dimensions on the div
display as a table-cell (allows vertical align)
vertical align (aligns on the Y-axis w/out weird hacks)
display:block on the img element
margin: auto centers the image laterally
Solution without IE-unfriendly display:table-cell:
<!DOCTYPE html>
<style>
div {
line-height:64px; /* that's the secret sauce */
text-align:center;
width:64px; height:64px;
}
img {vertical-align:middle}
</style>
<div><img …></div>
You could try putting the image inside a DIV that is 64x64 and not specifying the image dimensions. Then you could style the div so its contents are centered and any overflow is hidden.
You can dynamically get an image size using the getimagesize() php function:
<?php
$size = getimagesize('imgX.png');
$height = $size[1];
$width = $size[0];
?>
<div style="text-align: center">
<img src="imgX.png" width="<?php print($width) ?>" height="<?php print($height) ?>" />
</div>
I've had to do something similar with 36x36 images. Users were able to upload any size but the thumbnails were only to show the center 36 square pixels.
Markup:
<li><div><span></span>
<img src="_media/objects/jessica-bowman.png" alt="Jessica Bowman" /></div>
<p>Jessica Bowman</p>
</li>
The span was just there to get rounded corners on the image, it's not necessarily needed.
CSS:
ul.recent-list li div {
position: relative;
float: left;
width: 36px;
height: 36px;
overflow: hidden;
}
ul.recent-list li div span {
position: relative;
z-index: 100;
display: block;
width: 36px;
height: 36px;
background: url("../_media/icons/icon-overlay.png") top left no-repeat;
}
ul.recent-list li div img {
position: relative;
top: -36px;
z-index: 0;
float: left;
}
JavaScript:
$(window).load(function() {
$("ul.recent-list div img").each(function() {
var moveX = ($(this).width() / 2 * -1) + 18;
var moveY = ($(this).height() / 2) * -1 - 18; // 18 is 1/2 the default offset of 36px defined in CSS
$(this).css({'top' : moveY, 'left' : moveX});
});
});
The solution is a simple bit of CSS + HMTL
<img src="transparentpixel.gif"
width="64"
height="64"
style="
background-image:url('path/to/image.jpg');
background-repeat:no-repeat;
background-position:center center;
" />
the transparentpixel.gif is a simple 1x1px transparent gif image
An img tag with width and height attributes is saying "stretch or shrink the image to this size regardless of its actual size". use something like:
<div style="text-align:center;">
<img src="x.jpg">
</div>
and no i don't know why text-align would work, but it appears to in my experience.
Use CSS to render the image using background:
<div style="background: url(img1.png) no-repeat center center; height: 64px; width: 64px;"></div>
This will show the image in the center, without scaling it.