I have the following code that allows for a user to hover over an image and it will display a new image (well, a new section of a sprite image). I want it to display a third image on click. 1. Am i doing this the most efficient way? 2. How do I code for an on-click image to show up?
HTML:
CSS:
[class^="signin-"] {
display: inline-block;
vertical-align: text-top;
background-image: url('../images/signin_sprite.jpg');
background-repeat: no-repeat;
*margin-right: .3em;
}
[class^="signin-"]:last-child {
*margin-left: 0;
}
.signin-all{
background-position: 0px 0px;
width: 132px;
height: 37px;
position: absolute;
}
.signin-all:hover{
background-position: 0px -34px;
width: 132px;
height: 34px;
position: absolute;
}
You need JavaScript to solve this.
<a href="javascript:void(0)" onclick="changeImage()">
<img style = "border-radius: 5px;" class="signin-all" src="assets/images/header/blank.png" id="image">
</a>
<script>
function changeImage() {
document.getElementById("image").src="newImageSource";
}
</script>
Related
So, I have these two things. One is a transparent button and the other one is an image behind it.
I did that because adding a background didn't work. Here's what I tried:
.top-container > button {
background-image: url(path-to-image); /* I also tried image() */
background-repeat: no-repeat
width: 100px;
height: 33px;
color: white;
border: none;
font-family: 'CapitalisTypOasis', 'CapitalisTypOasisMedium';
text-align: center;
z-index: 2;
position: absolute;
top: 1.7em;
padding: 0;
}
I did all of the tiny variations I could think of, and since my deadline is soon, I put an image behind the button. Works perfectly.
.boutonsim {
display: block;
height: 33px;
width: 100px;
position: absolute;
top: 1.7em;
z-index: 1;
}
.top-container > button {
display: block;
width: 100px;
height: 33px;
background-repeat: no-repeat;
background-color: rgba(255, 255, 255, 0);
color: white;
border: none;
font-family: 'CapitalisTypOasis', 'CapitalisTypOasisMedium';
text-align: center;
z-index: 2;
position: absolute;
top: 1.7em;
padding: 0;
}
HTML:
<div class="top-container">
<img id="img2" src="images/haut.png" />
<img id="title" src="images/nom.png" />
<img id="logo" src="images/LOGO.png" />
<div class="boutonsim" style="right: 80px;"><img src="images/clipart/boutonORIGINAL.png" /></div>
<button style="right: 80px;">Culture</button>
</div>
They're supposed to be at the same place but when I open my file in Chrome, they're not.
Could anyone help? Thanks.
This is a GIF of the result in a snippet if it can help:
<img src="https://i.gyazo.com/c849e62e7893453a2b442f2060bce1e4.gif" alt="Image from Gyazo" width="166"/>
TL;DR; position them with anything but em.
The button must have a different font-size than the rest of the dom (which is also default behaviour), which means that the div and the button have different font-sizes. So because you are positioning them with em, they will be positioned differently (div: 27.2px and button: 22.667px), since the CSS compiler looks at the elements font-size to determine the top value in px.
In case you need to apply a background image to your button (I believe it's your real problem).
button {
width: 100px;
height: 33px;
padding: 0;
background:url(https://picsum.photos/id/1019/100/33) no-repeat;
color: white;
border: none;
}
<button>Culture</button>
I want to add a text when the user hover the mouse on my image gallery and zoom the when they clicked it. It already zooming in but when I add a class and text between the image class the magnific popup is not working. It seems like the text is blocking the image to be selected. I don't know how and what to change. Thanks!
Image Gallery Code:
$(".container").magnificPopup({
delegate: 'a',
type: 'image',
gallery:{
enabled: true
}
});
.box{
width: 270px;
height: 250px;
position: relative;
background-color: rgba(255,102,104,1.00);
margin: 10px auto;
cursor: pointer;
}
.box img{
max-width: 100%;
height: 100%;
object-fit: cover;
}
.box:hover::after{
transform: scale(1, 1.05);
}
.con-text{
position: absolute;
color: white;
bottom: 0;
width: 270px;
height: 250px;
padding: 75px 25px;
display: none;
text-align: center;
}
.box:hover .con-text{
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="box">
<a href="https://cdn.pixabay.com/photo/2014/08/21/14/51/pet-423398__180.jpg" class="image">
<img src="https://cdn.pixabay.com/photo/2014/08/21/14/51/pet-423398__180.jpg" alt="image">
</a>
<div class="con-text"> // Magnific popup doesn't work anymore when I add this div
<h2>Title</h2>
</div>
</div>
</div>
I'm building a website with a lot of images. The concept is of a galaxy so you can imagine I have a number of round planets and I want to make them clickable buttons.
These planets are in PNG format with transparent background and I want the clickable area to only be the non-transparent area (which is the shape of a circle). However, I have not found a possible solution to do this.
I have also tried to put a transparent circle on top of the image, and put <a href> on the transparent circle instead of on the image, but this does not seem to work either.
What makes it worse is that I have overlapping images which might cause some of the solutions I found not working. For example I have two or three overlapping images and I want them all to be a button (linking to different pages) (and I have another image in its background) so I don't know what's going to happen if I click at the intersection of these buttons.
Some of the solutions I've tried are:
http://jsfiddle.net/josedvq/Jyjjx/45/
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap
http://jsfiddle.net/DsW9h/
http://bryanhadaway.com/how-to-create-circles-with-css/
A snippet of my code:
HTML
<div>
<a href="~/SomePage">
<img draggable="false" class="AIcon" src="~/Content/Aicon.png" id="AI">
</a>
</div>
CSS
.AIcon{
position:absolute; left: 50%; top: 40%; width: 2.5%; height:5%; opacity: 1;
-webkit-animation: AAAIcon .5s linear 0s 1 normal forwards running;
}
#-webkit-keyframes AAAIcon {
0% {left: 50%; top: 40%; width: 2.5%; height:5%; opacity: 0; z-index:4;}
100% {left: 78%; top: 20%; width: 32%; height:32%; opacity: 1; z-index:4;}
}
As it is now the image is clickable within the whole square of the image, including the transparent area, but not all of the area is clickable (there are some patches in the image where it's just not clickable).
This is driving me nuts. Any pointers would be extremely helpful.
You have three ways to do it:
1- In the following snippet, I have used a css circle inside an image div on the first moon.
2- Alternatively, got the same result on the second moon placing the circle on div:after.
3- A third method is simply the opposite of the second: create a transparent circle and let the moon image on :after.
The first and third methods allow you to use the moon as a link with onclick javascript mouse event. The red element is set with pointer-events: none; so it have no effect on the moons' hovers.
body {
margin:0px;
background: black;
overflow: hidden;
}
#circle1 {
width: 200px;
height: 200px;
background: purple;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
cursor: pointer;
opacity: 0.2;
}
#image1 {
display: inline-block;
width: 200px;
height: 200px;
position: relative;
background: url('http://i.imgur.com/YAWvTuu.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
#image2 {
display: inline-block;
width: 200px;
height: 200px;
position: relative;
background: url('http://i.imgur.com/YAWvTuu.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
#image2:after {
content:"";
display: inline-block;
width: 200px;
height: 200px;
background: orange;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
cursor: pointer;
opacity: 0.2;
}
#inactive {
background: tomato;
position:absolute;
top:50px;
left: 50px;
height:50px;
width: 400px;
pointer-events: none;
opacity: 0.9;
}
#third {
position:absolute;
display: inline-block;
width: 200px;
height: 200px;
background: transparent;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
cursor: pointer;
}
#third::after {
content: url('http://i.imgur.com/YAWvTuu.png');
cursor: auto;
pointer-events: none;
}
<div id="image1" alt=image><div id="circle1" onClick="window.location.href = 'http://www.google.com'"></div></div>
<div id="image2" alt=image></div><div id=third class="circle" alt=image onClick="window.location.href = 'http://www.google.com'"></div>
<div id=inactive></div>
I'm not sure if I've interpreted your question properly, but look into z-index. If there's elements overlapping each other, this will be a reason why they're not able to be clicked.
So, you can wrap the planet or circle in an <a> tag, border-radius that <a> element to be 100% which makes it a full circle and then hide the overflow.
See this: https://jsfiddle.net/xcqy7r14/2/
Markup:
<a href="#">
<canvas></canvas>
</a>
<br><br>
<a href="#">
<canvas></canvas>
</a>
CSS:
a {
border-radius: 100%;
overflow: hidden;
display: inline-block;
}
canvas {
width: 100px;
height: 100px;
display: inline-block;
background: #f00;
border-radius: 100%;
}
I have a simple question which I can't seem to solve.
#tps_block {
height: 45px;
width: 940px;
}
#tps_point1 {
width: 351px;
background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") 0 0 no-repeat;
text-indent: -9999px;
display: block;
height: 100%;
float: left;
}
#tps_point1:hover {
background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") 0 -45px no-repeat;
}
#tps_point2 {
width: 284px;
background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") -351px 0 no-repeat;
text-indent: -9999px;
display: block;
height: 100%;
float: left;
}
#tps_point2:hover {
background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") -351px -45px no-repeat;
}
#tps_point3 {
width: 305px;
background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") -677px 0 no-repeat;
text-indent: -9999px;
display: block;
height: 100%;
float: left;
}
#tps_point3:hover {
background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") -677px -45px no-repeat;
}
<div id="tps_block">
<div id="tps_point1">Point 1
</div>
<div id="tps_point2">Point 2
</div>
<div id="tps_point3">Point 3
</div>
</div>
The idea is that there are 3 images side by side, and when the mouse hover's over each image, the image changes to a highlighted one, and the image is clickable too, so that the user is taken to some other place when the image is clicked.
I have managed to apply the hover effect, but I can't get the linking to work.
Can someone help me out ?
JSFiddle: http://jsfiddle.net/ahmadka/Fjmnt/
If you're able to change the HTML, just lose the inner div tags and apply exactly the same styles to the links themselves:
<div id="tps_block">
Point 1
Point 2
Point 3
</div>
Updated jsFiddle: http://jsfiddle.net/Fjmnt/7/
Best solution if you are unable to modify the HTML.. add the following CSS.
#tps_block a {
display: block;
width: 100%;
height: 100%;
}
This will fill <a> making the entire div clickable.
jsFiddle demo
<div id="tps_block">
<div id="tps_point1"></div>
<div id="tps_point2"></div>
<div id="tps_point3"></div>
</div>
I have a very simple bit of code that should effectively swap out images on hover. The main img is grey, and the :hover img is green. I can see that the green :hover img appears on hover, but it's behind the main grey one. How can I make this work so that the grey is not visible on :hover?
html
<div id="header">
<a class="logo" href="#"><img src="<?php bloginfo('template_url');?>/img/logo.png" alt="logo" /></a>
</div>
css
#header {
height: 40px;
padding-bottom: 40px;
padding-top: 80px;
vertical-align: middle;
width: 960px;
}
#header .logo {
display: block;
float: left;
width: 185px;
}
#header .logo:hover {
background: url('img/logo_hover.png') no-repeat;
}
Modified CSS:
#header {
height: 40px;
padding-bottom: 40px;
padding-top: 80px;
vertical-align: middle;
width: 960px;
}
#header .logo {
display: block;
float: left;
width: 185px;
height: 40px; /*added*/
}
#header .logo:hover {
background: url('img/logo_hover.png') no-repeat;
}
/*added*/
#header .logo img {
display: block;
}
#header .logo:hover img {
display: none;
}
that's because the classes are messed up.. here is an example of a button that has nothing in text but the source is set up from css // it also gives the hover effect from css:
.SubmitClass
{
background-image: url('../Images/Submit.jpg');
background-position: center center;
background-repeat: no-repeat;
border: none;
width: 100px;
height: 30px;
cursor: pointer;
cursor: hand;
}
.SubmitClass:hover
{
background-image: url('../Images/SubmitHover.jpg');
background-position: center center;
background-repeat: no-repeat;
border: none;
width: 100px;
height: 30px;
cursor: pointer;
cursor: hand;
}
You see one image behind the other because you are setting a background image for an image in content. For an image to be swapped out through hovering over it, you should either set BOTH images in CSS or both in content (and handle the swapping using JavaScript/JQuery).
<div id="header">
<a class="logo" href="#"><img src="<?php bloginfo('template_url');?>/img/logo.png" alt="logo" /></a>
</div>
In the above html you set an image as content.
You probably can't/don't want to output CSS dynamically using PHP so its more likely you should output both images and toggle their visibility
<div id="header">
<a class="logo" href="#"><img class="defaultImage" src="<?php bloginfo('template_url');?>/img/logo.png" alt="logo" />
<img class="hoverImg" src="<?php bloginfo('template_url');?>/img/logoHover.png" alt="logo" /></a>
</div>
and toggle the images with the following JQuery
$(document).on({
mouseenter: function() {
$('.hoverImage').show();
$('.defaultImage').hide();
},
mouseleave: function() {
$('.hoverImage').hide();
$('.defaultImage').show();
}
}, 'a.logo');
Alternatively, specify both background images using CSS as per Nathans answer.