I want to change an SVG image when hover
these are my imports
import sebhag from "./assets/Menu/grey/sebha-g.svg"
import sebhaw from "./assets/Menu/white/sebha-w.svg"
export const menu = {
title_sebhag: 'tasbieh',
image_sebhag: sebhag,
image_sebhaw: sebhaw,
};
I want to change the sebha-g.svg to sebha-w.svg when hover
<button>
<a href="#">
<figure>
<img src={image_sebhag} alt=" " />
<figcaption>{title_sebhag}</figcaption>
</figure>
</a>
</button>
Without additional context, the easiest way is probably through CSS:
<button>
<a href="#">
<figure>
<img class="figure-img src={image_sebhag} alt=" " />
<img class="figure-img--hover" src={image_sebhaw} alt=" " />
<figcaption>{title_sebhag}</figcaption>
</figure>
</a>
</button>
figure .figure-img--hover {
display:none
}
figure:hover .figure-img {
display: none;
}
figure:hover .figure-img--hover {
display: unset;
}
Here we simply hide the original image while hovering and instead display the desired image. Though there are many ways to skin this cat...
Related
I find it extremely difficult to believe the megabytes of css and javascript are required.
I have written a python program to read a yaml file with images for thumbnails and links to my google photo albums because they did away with picasaweb.google.com but kept all the albums.
I would be content to have four images per line scaling by %. I can't even figure out why these images are stacked vertically and offset.
It would be nice to have this responsive and show different number of album covers depending on width, but scaling is fine.
<html>
<head>
Why the indent
</head>
<body>
<h1>Why the indent</h1>
<h2>Nepal</h2>
<a href="https://www.w3schools.com/images/lamp.jpg">
<figure>
<img src="https://www.w3schools.com/images/lamp.jpg"
style="width:20%">
<figcaption>The lake</figcaption
</figure>
</a>
<a href="https://www.w3schools.com/images/lamp.jpg">
<figure>
<img src="https://www.w3schools.com/images/lamp.jpg"
style="width:20%">
<figcaption>Chitwan, wild tigers and elephants</figcaption
</figure>
</a>
<a href="https://www.w3schools.com/images/lamp.jpg">
<figure>
<img src="https://www.w3schools.com/images/lamp.jpg"
style="width:20%">
<figcaption>Elephant Abuse</figcaption
</figure>
</a>
</body>
You need to close your figcaptions, then you can use display: flex on an element that wraps the a's you want in a row, and set the a's to flex-grow: 1 or flex: 1 0 0 for short so they fill the available width of the row.
.flex {
display: flex;
}
.flex > a {
flex: 1 0 0;
}
<h1>Why the indent</h1>
<h2>Nepal</h2>
<div class="flex">
<a href="https://www.w3schools.com/images/lamp.jpg">
<figure>
<img src="https://www.w3schools.com/images/lamp.jpg">
<figcaption>The lake</figcaption>
</figure>
</a>
<a href="https://www.w3schools.com/images/lamp.jpg">
<figure>
<img src="https://www.w3schools.com/images/lamp.jpg">
<figcaption>Chitwan, wild tigers and elephants</figcaption>
</figure>
</a>
<a href="https://www.w3schools.com/images/lamp.jpg">
<figure>
<img src="https://www.w3schools.com/images/lamp.jpg">
<figcaption>Elephant Abuse</figcaption>
</figure>
</a>
</div>
Figure is an element that has display: block property - so it fit one at each line. Try switching to div with h2 instead - that givers you more flexibility and better code understanding for web browsers and SEO.
Btw. you're not even closing </figcaption in snippet above.
I'm a trainee and actually I'm working on a web shop.
Now I got the problem that I have multiple images placeholders (image_1-6) for our article images. Problem now is, if the article only has 2 images the placeholders for the other 4 are still there. So is there any possibility to hide them if the src is empty or a parameter defined by me?
Here is the code snippet:
<div class="sideimg grid_2">
<div id="image_1" class="lb_thumb">
<a href="javascript:;" onmouseover="swapImage('Bild1','','http://media-11teamsports.de/ArticleBig/[ArtikelOnlinebezeichnungD.Bild1]',1)" onmouseout="swapImgRestore()">
<img class="lb_detailimg" src="http://media-11teamsports.de/ArticleSmall/[ArtikelOnlinebezeichnungD.Bild1]"id=image1 name="Bild1" alt="Bild1" id="Bild2" />
</a>
</div>
<div id="image_2" class="lb_thumb">
<a href="javascript:;" onmouseover="swapImage('Bild1','','http://media-11teamsports.de/ArticleBig/[ArtikelOnlinebezeichnungD.Bild2]',1)" onmouseout="swapImgRestore()">
<img class="lb_detailimg" src="http://media-11teamsports.de/ArticleSmall/[ArtikelOnlinebezeichnungD.Bild2]" id=image2 name="Bild2" alt="Bild2" id="Bild2" />
</a>
</div>
<div id="image_3" class="lb_thumb">
<a href="javascript:;" onmouseover="swapImage('Bild1','','http://media-11teamsports.de/ArticleBig/[ArtikelOnlinebezeichnungD.Bild3]',1)" onmouseout="swapImgRestore()">
<img class="lb_detailimg" src="http://media-11teamsports.de/ArticleSmall/[ArtikelOnlinebezeichnungD.Bild3]" id=image3 name="Bild3" alt="Bild3" id="Bild2" />
</a>
</div>
<div id="image_4" class="lb_thumb">
<a href="javascript:;" onmouseover="swapImage('Bild1','','http://media-11teamsports.de/ArticleBig/[ArtikelOnlinebezeichnungD.Bild4]',1)" onmouseout="swapImgRestore()">
<img class="lb_detailimg" src="http://media-11teamsports.de/ArticleSmall/[ArtikelOnlinebezeichnungD.Bild4]" id=image4 name="Bild4" alt="Bild4" id="Bild2" />
</a>
</div>
<div id="image_5" class="lb_thumb">
<a href="javascript:;" onmouseover="swapImage('Bild1','','http://media-11teamsports.de/ArticleBig/[ArtikelOnlinebezeichnungD.Bild5]',1)" onmouseout="swapImgRestore()">
<img class="lb_detailimg" src="http://media-11teamsports.de/ArticleSmall/[ArtikelOnlinebezeichnungD.Bild5]" id=image5 name="Bild5" alt="Bild5" id="Bild2" />
</a>
</div>
<div id="image_6" class="lb_thumb">
<a href="javascript:;" onmouseover="swapImage('Bild1','','http://media-11teamsports.de/ArticleBig/[ArtikelOnlinebezeichnungD.Bild6]',1)" onmouseout="swapImgRestore()">
<img class="lb_detailimg" src="http://media-11teamsports.de/ArticleSmall/[ArtikelOnlinebezeichnungD.Bild6]" id=image6 name="Bild6" alt="Bild6" id="Bild2" />
</a>
</div>
</div>
Here is the live version(wip): http://www.ebay.de/itm/Jako-Tape-10-Meter-2-5-cm-breit-Rot-F01-/272269970423?
All I know about html css and js I learned by myself so I hope the snippet is fine.
So as you can see I have 6 images with js image swap. The only left problem is that our database don't contains an image for every placeholder, so if there are only 4 pictures there are still 2 empty boxes. So how can i get rid of them?
Thanks all for your help and excuse my english I'm from Germany.
You can try using the CSS selector for html attributes like this:
.lb_detailimg[src]{
(Whatever css u need goes here)
display: block;
}
.lb_detailimg{
display: none;
}
If any <img> of class lb_detailimg does not have a src attribute it will not be displayed.
You could also use a keyword in the src attribute to make this happen, like this:
.lb_detailimg{
(Whatever css u need goes here)
}
.lb_detailimg[src=keyword]{
display: none;
}
EDIT:
As you cannot give style to a parent element in CSS here is a JS snippet that should work fine:
window.onload = function(){
var img_containers = document.getElementsByClassName("lb_thumb");
for(var i=0; i<img_containers.length;i++){
if(img_containers[i].getElementsByTagName("img")[0].src.indexOf("keyword") > -1){
img_containers[i].style.display = "none";
}
}
}
At line 4 in the if ==> .indexOf("yourKeyWordHere")
I'm learning the JavaScript language and I'd like to reproduce something. I have a text called "Pause" and I'd like that, on click, another text replaces it with "Play".
Here's my JavaScript code:
(function($) {
$('#slideshow-pause-icon').click(function(e) {
e.preventDefault();
$('#slideshow, #slider, figcaption, #timeline').toggleClass('slideshow-pause');
});
})(jQuery);
Here's my HTML code:
<div id="slideshow">
<span id="slideshow-pause-icon" title="Click to pause">Pause</span>
<div id="slideshow-container">
<div id="slider">
<figure>
<a href="style-1.php">
<img src="images/image-1.jpg" alt="">
<figcaption>Style 1</figcaption>
</a>
</figure>
<figure>
<a href="style-2.php">
<img src="images/image-2.jpg" alt="">
<figcaption>Style 2</figcaption>
</a>
</figure>
<figure>
<a href="style-3.php">
<img src="images/image-3.jpg" alt="">
<figcaption>Style 3</figcaption>
</a>
</figure>
<figure>
<a href="style-4.php">
<img src="images/image-4.jpg" alt="">
<figcaption>Style 4</figcaption>
</a>
</figure>
</div>
<span id="timeline"></span>
</div>
</div>
Currently, when I click on the "Pause" text: http://i.stack.imgur.com/UYg7h.png
the slideshow-pause class is displayed and it has this CSS:
.slideshow-pause
{
animation-play-state: paused !important;
-webkit-animation-play-state: paused !important;
-moz-animation-play-state: paused !important;
-o-animation-play-state: paused !important;
}
Using JavaScript, I'd like that by clicking on the "Pause" text, my span ID slideshow-pause-iconis replaced by something like this:
<span id="slideshow-play-icon" title="Click to play">Play</span>
Thanks.
$(document).on("click", "#slideshow-pause-icon, #slideshow-play-icon", function(){
$(this).html()=="Play"?$(this).html("Pause"):$(this).html("Play");
this.id= (this.id=="slideshow-pause-icon"?"slideshow-play-icon":"slideshow-pause-icon");
this.title = (this.title=="Click to pause"?"Click to play":"Click to pause");
$("#slideshow, #slider, figcaption, #timeline").toggleClass("slideshow-pause");
});
This is gonna work for you.
With JQuery is quite easy:
$("#slideshow-play-icon").text("Pause");
You could do something like this. Just check if it has the class you're using to drive the text. It looks like this is playing an image gallery?
$('#slideshow-pause-icon').click(function()
{
var $this = $(this);
if($this.hasClass('slideshow-pause'))
{
$this.removeClass('slideshow-pause').text('Play');
//do something else to play the image gallery
}
else
{
$this.addClass('slideshow-pause').text('Pause');
//do something else to pause the image gallery
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="slideshow">
<span id="slideshow-pause-icon" class='slideshow-pause' title="Click to pause">Pause</span>
</div>
I want to include anchor tag inside img tag in html.
<img src="img.jpg" alt="no img" />
inside this i want to include:
<a onclick="retake();" > Retake </a>
Actually by clicking retake i want to take a different photo for that photo.
How to include a inside img? any help?
An img element cannot contain any other content, whether HTML elements or even text-nodes. The closest you can come is to wrap the img with an a:
<a onclick="retake();"> Retake <img src="img.jpg" alt="no img" /></a>
Although there is the possibility to wrap the img with another element, say a span, and have the a as a sibling:
<span>
<img src="img.jpg" alt="no img" />
<a onclick="retake();"> Retake </a>
</span>
And use CSS to position it over the element (so visually-'within'):
span {
position: relative;
}
span a {
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
JS Fiddle demo.
Wrap the <img/> in the anchor:
<a onclick="retake();" title="Retake"><img src="img.jpg" alt="no img" /> Retake</a>
To swap the image on click:
function retake()
{
this.getElementsByTagName('img')[0].src = "newimage.jpg";
}
Try to wrap the image tag like
<a onclick="retake();"> Retake <img src="img.jpg" alt="no img" /></a>
or you can put the image before text like
<a onclick="retake();"> <img src="img.jpg" alt="no img" /> Retake </a>
How can I get an Image overlay to work with this code?
What I want is a set of icons to overlay, ontop of a image when the cursor moves over it.
http://socialartist.co/index.html
The code in question is HTML 5 and CSS 3, and has quite a lot of mark-up:
<ul class="items x_columns">
<li data-id="id-1" data-cat="#luxury">
<div class="preview"><a href="#" class="frame">
<img src="https://i1.sndcdn.com/avatars-000008744854-5sr588-large.jpg?d408275" id="imgSmile" alt=""/></a>
</div>
<a class="title" href="#">Kirkbridge DNB</a>
<p>UK | Drum and Bass</p>
</li>
When I try to add a new div it just breaks the design (eg messes up the preview class border)
Is there 'an easy way' to just overlay onto an existing image, as above.
I don't really know how to set this up on Fiddle; I am hoping that ppl could just use developer tools (inspect element) on the page URL above?
If I got it right:
Add the icon you want to dispay inside the anchor tag:
Quick and dirty example: http://jsfiddle.net/ZVSVw/
<a href="#" class="frame">
<img src="https://i1.sndcdn.com/avatars-000008744854-5sr588-large.jpg?d408275" id="imgSmile" alt=""/>
<div class=overlay>ICON</div>
</a>
Set it to display: none by default and style it with the selector .frame:hover > .overlay.
To your comment
remove the following line from your style.css:1654:
a > .frame:hover, a.frame:hover{
background: #ffffff;
/* border: 1px solid #24bfb6; remove this line */
}
You could add the other overlay picture with the display: none; property set and then basically toggle between the two pictures fiddle
Javascript:
jQuery('li[data-id="id-3"] > div').on('hover', 'a', function() {
jQuery(this).find('img').toggle();
jQuery(this).find('div.overlayContent').toggle();
});
Html:
<li data-id="id-3" data-cat="#holiday">
<div class="preview">
<a href="#" class="frame">
<img src="http://..." alt="default picture">
<div class="overlayContent" style="display: none;">...overlay content</div>
<!--img src="http://..." alt="alternate picture" style="display: none;"-->
</a>
</div>
<a class="title" href="#">TEST ME!</a>
<p>Test this one!</p>
</li>