I am building an Ionic app and I want to click on the image and change it with a different image. It is a toggle functionality.
I have the following class:
img{
&.default {
background-image: url("img/726-star.png");
&.activated{
background-image: url("img/726-star-selected.png");
}
}
And I apply the class as shown below:
<img class="default" style="width:38px;height:38px;margin-top:30px;"/>
But when I see in the Chrome Debugger tools I don't see the default class being applied. What am I doing wrong?
UPDATE: So, I am using DIV now instead of an image but I don't see the image displayed in the div:
#favImage {
&.default {
background-image: url("img/726-star.png");
}
&.activated {
background-image: url("img/726-star-selected.png");
}
}
<div id="favImage" class="default" style="width:38px;height:38px;margin-top:30px;"></div>
first of all i recommened you to sparate your style in the html to a css file.
second if you are using img tag don't forget to insert src attribute to the img tag other wise the img won't show.
to change the image by clicking on it i use JavaScript function that activated by write an attribute on the img tag "onclick" and call the JavaScript function.
the function take image id into a variable and with the use of a match method check if the image src contains string "726-star-not" if its not the image src changes to "726-star-selected" and vice versa.
to learn more about the match method
function myFunction() {
var image = document.getElementById('favImage');
if (image.src.match("726-star-not")) {
image.src = "img/726-star-selected.png";
} else {
image.src = "img/726-star-not.png";
}
}
#favImage{
width:38px;
height:38px;
margin-top:30px;
}
<html>
<head>
<link rel="stylesheet" href="css/style.css"/>
<script src="js/javascript.js"></script>
</head>
<body>
<img id="favImage" src="img/726-star-not.png" onclick="myFunction()">
</body>
</html>
Related
Can I change background color of paragraph when I click on a link in the page.
Go to P4
<p id="p4">I'm P4</p>
what I need write in css to get -
p { background-color: yellow; }
You can not change the attribute of an element by clicking on another element with CSS, but it can be with JavaScript. Just add <script> tag to end of your <body> and onclick() to <a>:
<body>
Go to P4
<p id="p4">I'm P4</p>
<script>
function changeColor() {
document.getElementById("p4").style.backgroundColor = "yellow";
}
</script>
</body>
I am new to html.I need a delete button with animated style. I have used a gif image for animation. I want this image to be run when the user place the mouse over it. Currently, the gif image is running infinite.
How to make the image run when the user move the mouse over it. Help me with some solutions.
If you have any other transparent delete image, please provide, it can help me.
Here's the markup I tried:
<html>
<body>
<a>
<img src="https://i.postimg.cc/1RGh8PpK/delete.gif"
alt="Delete image" width="100" height="100" />
</a>
</body>
</html>
Head on over EZGIF to crop your gif and make it an appropriate size for a button:
Use your computer to take a static screenshot of the gif (you'll have to time it right):
Use HTML to hold both the static and animated image elements:
<img class='static_trash' id = 'static_btn' src='https://collaboratescience.com/stack/googs/trash_static.png' alt='Delete image' width='100' height='100' />
<img class='live_trash' id = 'live_btn' src='https://i.postimg.cc/1RGh8PpK/delete.gif' alt='Delete image' width='100' height='100' />
Use CSS to set live_trash to "display: none"
. live_trash {
"display" : "none"
}
Use JavaScript to change image source on hover:
Vanilla JavaScript:
let static_elem = document.getElementById("static_btn")
let live_elem = document.getElementById("live_btn")
static_elem.addEventListener("mouseenter", function( event ) {
event.target.style.display = "none";
live_elem.style.display = "block"
})
static_elem.addEventListener("mouseleave", function( event ) {
event.target.style.display = "block";
live_elem.style.display = "none"
})
Result:
You can play with crop sizing to get it better.
You can achieve this with JavaScript or CSS. All you need is a static frame from the gif.
JavaScript
You can utilize the mouseenter and mouseleave mouse events to alter the src of the image.
const states = {
'default': "https://i.stack.imgur.com/mJHTA.png",
'hover': "https://i.stack.imgur.com/WwxRR.gif"
};
let img = document.querySelector('#hover-img');
img.addEventListener('mouseenter', function(e) {
img.setAttribute('src', states.hover);
});
img.addEventListener('mouseleave', function(e) {
img.setAttribute('src', states.default);
});
<a>
<img src="https://i.stack.imgur.com/mJHTA.png" id="hover-img" alt="Delete image" width="100" height="100" />
</a>
CSS
Or, you can determine if the user if hovering over the element using the CSS pseudo-class :hover, but you will probably want to use a <div> or a <span> instead of a <img>.
.hoverable {
display: inline-block;
width: 100px;
height: 100px;
background: center url('https://i.stack.imgur.com/mJHTA.png') no-repeat;
background-size: contain;
}
.hoverable:hover {
background-image: url('https://i.stack.imgur.com/WwxRR.gif');
}
<a><span class="hoverable"></span></a>
JavaScript using data tags
Alternatively, you can associate the default and hover state with the element via data-* attributes.
You can utilize the mouseenter and mouseleave mouse events to alter the src of the image.
let img = document.querySelector('#hover-img');
img.addEventListener('mouseenter', function(e) {
img.setAttribute('src', e.target.getAttribute('data-hover-src'));
});
img.addEventListener('mouseleave', function(e) {
img.setAttribute('src', e.target.getAttribute('data-default-src'));
});
<a>
<img id="hover-img" alt="Delete image" width="100" height="100"
src="https://i.stack.imgur.com/mJHTA.png"
data-default-src="https://i.stack.imgur.com/mJHTA.png"
data-hover-src="https://i.stack.imgur.com/WwxRR.gif" />
</a>
a {
background-image: url("https://i.postimg.cc/1RGh8PpK/static-delete.png")
}
a:hover {
background-image: url("https://i.postimg.cc/1RGh8PpK/delete.gif")
}
I'm learning how to code and I wanted to link a loading page to my HTML but it doesn't seem to be working. I got my code from here but it seems like it's not working at all. If you guys could identify the problem, that'd be great.
This is the code as of now:
<html>
<head>
<meta charset="UTF-8">
<title>Loading</title>
<link href="demo.css" rel="stylesheet" type="text/css">
<link href="normalize.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>
I did not find your code.
So Here is a sample approach.
While the page is loading, image will be displayed at the middle of the page and the entire page is in transparent background. So Whenever your page gets loaded, then add hidden class to that image div.
Create 2 Classes one is to make div hidden.
.hidden{
display:none;
}
Second one to show image.
.show_image{
position:fixed;top:0;right:0;bottom:0;left:0;
background: rgba(0,0,0,0.5) url(/img/spinner.gif) no-repeat 50% 50%;
z-index:100;
background-size: 5ex;
}
And your HTML code would be
<div class="show_image"></div>
<div class="hidden box"> Your actual content </div>
Initially your content will be hidden state and loading image will be displayed.
After completion of page loading just toggle the hidden class.
$('.box').removeClass("hidden");
$('.show_image').addClass("hidden");
You can use load function to know that page is fully rendered.
$(window).load(function() {
//everything is loaded
});
So that your content will become visible and loading image will be hidden.
Let me know if you need to any help regarding Page Load.
you can try this one:
function onReady(callback) {
var intervalID = window.setInterval(checkReady, 1000);
function checkReady() {
if (document.getElementsByTagName('body')[0] !== undefined) {
window.clearInterval(intervalID);
callback.call(this);
}
}
}
function show(id, value) {
document.getElementById(id).style.display = value ? 'block' : 'none';
}
onReady(function () {
show('page', true);
show('loading', false);
});
DEMO HERE
I'm following this tutorial (Removed link as YouTube videos are not allowed on SO).
I can't understand why the banner wont flick through as it should, I have 4 images I intend it to flick through.
Also if anyone does solve this how can I make the images link to another page, e.g is it as simple as adding <a href=.......> in the HTML code?
HTML:
<script type="text/javascript" src:"jquery.js"></script>
<div id="banner">
<img src="images/banner1.jpg" class="active" />
<img src="images/banner4.jpg" />
<img src="images/banner2.jpg" />
<img src="images/banner3.jpg" />
</div>
javascript/jQuery
$(document).ready(function () {
setInterval(function () {
//Get current active image
var active = $('#banner .active');
// If there is another image(object) left then make that image next
// If not, go back to the first image of the banner div
if (active.next().length > 0) var next = active.next();
else var next = $('#banner img:first');
//Get the next image ready by modifying the z-index
next.css('z-index', '2');
//Fade out the active image, then
active.fadeOut(1000, function () {
});
//Move the active image to the back of the pile, show it and remove the active class
active.css('z-index', '1').show().removeClass('active');
//Make the next image the active one
next.css('z-index', '3').addClass('active');
});
}, 3000);
});
CSS
#banner {
position: relative;
margin-left: auto;
margin-right: auto;
height: 350px;
width: 950px;
margin-top: 10px;
}
#banner img {
position:absolute;
z-index:1;
}
#banner img.active {
z-index:3;
}
Right so to start with you don't have your script linked up.
You have:
<script type="text/javascript" src:"jquery.js"></script>
It should be:
<script type="text/javascript" src="jquery.js"></script>
As you have just put jquery.js that means if you homepage (whatever page is using it) is in C:\Users\Me\Documents\Website then jquery.js also needs to be in that same folder.
Then we move to the jQuery, its all ok untill the end of it. You close it with }, 3000);
but then try to close it again using });. The indentation also gives it away.
So when we fix that we get this DEMO HERE
Im currently in the process of building a website for my graphic design work. On my home page Ive got a selection of images showing my work. I want to be able to hover over the images so they have an overlay showing the name of the project and what category it comes under. Ive researched that you can do this using html, using the following code -
<a href="TARGET URL GOES HERE">
<img src="URL OF FIRST IMAGE GOES HERE"
onmouseover="this.src='URL OF SECOND IMAGE GOES HERE';"
onmouseout="this.src='URL OF FIRST IMAGE GOES HERE';">
</img>
</a>
however when i tried this, it didn't work on the preview, I've already heard that this method can cause problems and is pretty old school.
Ive also read that you can use CSS method by creating an image with the two images you want rolling over next to each other.
However if i do it this way will it be easy to put text over the rollover, as well as links. For example on the roller over image I will make the text using HTML and links, but is this easy to do using the CSS method?
Here is a website that uses this method -
http://www.equisgarcia.com
There are multiple approaches to this issue, depending always on your needs.
I made a fiddle using only CSS with one of the approaches, you can see it working here.
All you you need is:
1) Define a parent element "parentExample" containing the image and the text with a size.
2) Define image "imageExample" and text "textExample" to cover all the parent size and set the text to be hidden by default.
3) Define a hover "parentExample:hover" in which image is hidden and text display.
.parentExample {
height: 400px;
width: 400px;
}
.imageExample {
height: 100%;
width: 100%;
}
.textExample {
height: 100%;
width: 100%;
display: none;
}
.parentExample:hover .imageExample {
display: hidden;
}
.parentExample:hover .textExample {
display: block;
}
An image
div { background:url('http://www.placehold.it/200x200/f2f2f2') no-repeat; }
On hover display a different image
div:hover { background:url('http://www.placehold.it/200x200/666666') no-repeat; }
If the element is an anchor or has some onclick function defined with it.. display a different image on select with a new class
div.selected { background:url('http://www.placehold.it/200x200/000000') no-repeat; }
This is how the first figure image on the site is done in HTML:
<html>
<head>
<title></title>
</head>
<body>
<div id="pr_contain_item_7129129">
<a class="nohover" href="/New-Year-s-Card" id="p7129129" name=
"equisgarcia" onfocus="this.blur()" onmouseout=
"this.className='nohover';" onmouseover="this.className='hover';" rel=
"history"></a>
<div class="loader_holder" id="load_7129129"><img src=
"/_gfx/loadingAnim.gif"></div>
<div class="cardimgcrop" id="cardthumb_7129129"><img border="0"
data-hi-res=
"http://payload241.cargocollective.com/1/8/281332/7129129/prt_300x169_1390152506_2x.jpg"
height="169" src=
"http://payload241.cargocollective.com/1/8/281332/7129129/prt_300x169_1390152506.jpg"
width="300"></div>
<div class="thumb_title">
<span class="text">New Year's Card</span>
</div>
<div class="excerpt">
Fig.ω
</div>
<div class="thumb_tag">
<span class="text"><a href=
"http://www.equisgarcia.com/filter/Lettering">Lettering</a>,
<a href=
"http://www.equisgarcia.com/filter/Print">Print</a> </span>
</div>
</div>
</body>
</html>
you can simply do this with javascript and html and also with css and as follows:
<html>
<style type="text/css">
#sam{
height: 100px;
width: 100px;
background-color:#ccc;
}
#sam:hover{
background-color: #eee;
}
</style>
<head>
<script type="text/javascript">
var change = function(){
var x = document.getElementById("sam");
x.innerHTML = "this is new";
}
var changeanother = function(){
var x = document.getElementById("sam");
x.innerHTML = " ";
}
</script>
</head>
<body>
<div id="div2"></div>
<div id="sam" onmouseover="change();" onmouseout="changeanother();"> </div>
</body>
</html>
futrher using innerHTML helpes you to gave more controls over your tag.
you can also use img tage insted of a div tag.
as you wish
You an use sprites; in CSS using background-position-x, -y properties.
<div class="image"></div>
CSS:
div.class {
background-image: url('../img/image.jpg');
}
div.class:hover {
background-x: -100px;
}
Providing you have a sprite image created (two or more images in one). On hover you are actually offsetting your image by 100px to show the other image.