How can I put background image when I hover a link
<html>
<head> </head>
<body>
Insert Bg in this a when hover
</body>
</html>
You need set the display property of the anchor tag to block and give it a height for the background to fill in.
HTML:
<html>
<head> </head>
<body>
Insert Bg in this a when hover
</body>
</html>
CSS:
a{
display : block;
height : 100px;
}
a:hover{
background : url('http://i.giphy.com/xUySTCEXzJdGCeIj3W.gif');
}
Use css :hover psudo-class selector and set background-image property.
a:hover {
background-image : url(img.png);
}
a:hover {
background-image : url(https://placehold.it/100x15);
}
<html>
<head> </head>
<body>
Insert Bg in this a when hover
</body>
</html>
Try this CSS
a:hover {
background: url("http://wallpaper-gallery.net/images/grey-wallpaper-hd/grey-wallpaper-hd-23.jpg");
//Replace the URL with the desired image you want as a Bg
}
<html>
<head> </head>
<body>
Insert Bg in this a when hover
</body>
</html>
Related
I got a problem with tag. I have list of clickable phone numbers on the page and I want to mark used urls.
I created small example and tried to use :visited selector to change color for clicked urls, but it doesn't work.
Let me show the code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.phone:visited {
color: red;
}
.phone {
color: blue;
}
</style>
</head>
<body>
<h1>Hi</h1>
<a class="phone" href="tel:#">Call me</a>
</body>
</html>
I found in Google Chrome inspector, that css works correctly (I manually added "visited" class and url's color was changed), but browser doesn't mark url as visited after click.
Is there any chance to fix this behavior?
Thank you!
Nothing will happen on desktop, because desktop browsers don't know what to do with tel:.
You could use something like jQuery to achieve this on desktop.
$('.phone').click(function() {
$('.phone').css({"color": 'red'});
});
You have to assign class through jquery.
$('.phone').click(function () {
$(this).addClass("visited");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.visited {
color: red !important;
background-color: yellow;
}
.phone {
color: blue;
}
</style>
</head>
<body>
<h1>Hi</h1>
<a class="phone" href="#">Call me</a>
<a class="phone" href="#">Calling you</a>
</body>
</html>
So manage with javascript session and additional css class will be handle your problem
<style type="text/css">
.selected {
color: red !important;
}
.phone {
color: blue;
}
</style>
JS
<script type="text/javascript">
var a = document.getElementsByTagName("a");
//I assumed there is only one a link so tried with index 0
if(sessionStorage.getItem("visited") != null) a[0].classList.add("selected"); //check visited link then add class selected
a[0].addEventListener("click",function(){
sessionStorage.setItem("visited","true");//set session visited
this.classList.add("selected");
});
</script>
You need to declare .phone first before .phone:visited in your css.
I have a div inside another div. the parent has a particular class name that doesn't specifically have any css applied to it. the child element has css applied to it, specifically it's background color. so it looks like this...
<div id='myparent' class='someclass'>
<div id='mychild' class='somebgcolor'></div>
</div>
what I want to do is change the background color of the child div when the class of the parent div is changed. so I'm changing the class of the parent with this javascript...
document.getElementById('myparent').className = 'someotherclass';
and in my css...
.someclass .somebgcolor {
background-color: #369;
}
.someotherclass .somebgcolor {
background-color: #401;
}
but it doesn't work. for starters, the initial background color isn't even applied, and no background color is applied when i update the class of the parent div. am i missing something fundamental to the way applying css to nested elements works?
I don't think you're missing anything. I just tried it out and it works fine:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.someOtherClass {
background-color: yellow;
}
.someOtherClass .someBgColor {
background-color: red;
}
</style>
</head>
<body>
<div id="myParent" class="someClass">
<div id='myChild' class="someBgColor">
asdasadasd
</div>
</div>
<script>
var parent = document.getElementById('myParent');
parent.className = "someOtherClass";
</script>
</body>
</html>
I am trying to apply the fade effect to the javascsript background slideshow. When I changed the value, JS ignored it. I tried fadeIn and fadeOut. What is wrong with this code?
var bgimages=new Array()
bgimages[0]="tenis.jpg"
bgimages[1]="rtrr.jpg"
bgimages[2]="tenis.jpg"
//preload images
var pathToImg=new Array()
for (i=0;i<bgimages.length;i++) {
pathToImg[i]=new Image()
pathToImg[i].src=bgimages[i]
}
var inc=-1
function bgSlide() {
if (inc<bgimages.length-1)
inc++
else
inc=0
document.body.background=pathToImg[inc].src
}
if (document.all||document.getElementById)
window.onload=new Function('bgSlide(); setInterval("bgSlide()",3000),fade(2000)')
You can not fade background images. You can fade images in <img> tags.
Here is my jsFiddle DEMO.
Here is some sample code (including JQuery, CSS, and HTML):
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
img{
position:absolute;
top:0;
display:none;
width:auto;
height:100%;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function fader() {
$("img").first().appendTo('#wrap').fadeOut(3000);
$("img").first().fadeIn(3000);
setTimeout(fader, 4200);
}
</script>
</head>
<body onLoad="fader();">
<div id="wrap">
<img src="http://stats.hashweb.org/static/img/jsfiddle-logo.png">
<img src="http://startbootstrap.com/templates/freelancer/img/profile.png">
<img src="http://www.silvercoinstoday.com//images/Silver-Element-Atomic-Structure.jpg">
</div>
</body>
</html>
While it is true that "you can not fade background images", you can fade-in and fade-out the DIVs whose background URLs are the images you want to fade.
The demo above from totallytotallyamazing, however, does not give the desired result where images should dissolve from one to the other, and not leave a blank screen in between.
Is there a way to link javascript to a certain style in the css? Here is an example of what I want to do:
syntax onclick="[change style to external stylesheet class-for example changes]". Is there a special function to do this.?
changes { /*just an example, i know i can do this is css and html only*/
background-img:url("");
}
Please comment if you need more information.
sample.css
.rednode{
background-color: red;
}
.bluenode{
background-color: blue;
}
In JS,
function changeClass(node) {
node.classList.remove("rednode");
node.classList.add("bluenode");
}
In HTML,
<span class='rednode' onclick='changeClass(this)'/>
Try Add class Remove Class
Here I will show one Example ;
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#RC").click(function(){
$("p").removeClass("intro");
});
$("#AC").click(function(){
$("p").addClass("intro");
});
});
</script>
<style type="text/css">
.intro
{
font-size:120%;
color:red;
}
</style>
</head>
<body>
<p class="intro">Add Class Remove Class Example</p>
<button id="RC">Remove Class</button>
<button id="AC">Add Class</button>
</body>
</html>
Try this.. It may Help you !
Yes, you could do
onclick="this.style='color: red;';"
if that's what you want.
You would put it in an HTML element:
<p style="" onclick="this.style='color: red;';">Some text</p>
Or, if you want to link to a class or id:
<p class="" onclick="this.class='red';">Some text</p>
With the external css file having:
.red { color: red;
}
Hope this helps!
Here's a sample gallery:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Slideshow</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#large {width:448px; height:336px; background:#000 url(http://lh5.googleusercontent.com/-ugFamEhbqPo/Thc6hoArbwI/AAAAAAAAABA/PFeHcJhR4Xw/s800/image1.jpg) no-repeat center;}
#thumbs {padding-top:12px; overflow:auto; white-space:nowrap; width:448px;}
img {padding:1px; width:80px; height:60px;}
img:hover {background:#00F;}
</style>
</head>
<body>
<div id="large"></div>
<div id="thumbs">
<img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt="" onclick="document.getElementById('large').style.backgroundImage='url(http://lh5.googleusercontent.com/-ugFamEhbqPo/Thc6hoArbwI/AAAAAAAAABA/PFeHcJhR4Xw/s800/image1.jpg)';">
<img src="http://lh3.googleusercontent.com/-JU5a-eDnOSg/Thc7g5UkwLI/AAAAAAAAABI/9aCyCMixWb4/s800/thumb2.jpg" alt="" onclick="document.getElementById('large').style.backgroundImage='url(http://lh3.googleusercontent.com/-u5BHGxpr0rg/Thc6hLbDRKI/AAAAAAAAAA8/IvQWzJBvqjg/s800/image2.jpg)';">
<img src="http://lh4.googleusercontent.com/-TdbbNGFbDNk/Thc7g0IBSsI/AAAAAAAAABM/pxpntZaTVoQ/s800/thumb3.jpg" alt="" onclick="document.getElementById('large').style.backgroundImage='url(http://lh4.googleusercontent.com/-4AMWSfi8q7A/Thc6haUv1QI/AAAAAAAAABE/oRdTWawPi_c/s800/image3.jpg)';">
</div>
</body>
</html>
I wonder how I can highlight the active thumbnail so its background remains blue until I click another one.
Thanks in advance!
Mike
Here's a simple solution in pure JavaScript that is in tune with what you're already doing:
http://jsfiddle.net/drNqx/3/
Add this simple function in the <head> of the document:
<script type="text/javascript">
function reset()
{
var imgs = document.getElementsByTagName('img');
for(var i = 0; i < imgs.length; i++)
{
imgs[i].style.backgroundColor = '#fff';
}
}
</script>
The place this in front of what you already have in the onclick for each thumbnail image:
reset();this.style.backgroundColor='#00f';
To highlight the first thumbnail as the default, add this below the reset() function:
function init()
{
document.getElementById('img1').style.backgroundColor='#00F';
}
window.onload = init;
Here is the working fiddle:
http://jsfiddle.net/DEn6r/2/
Jquery code to add:
$('img').click(function() {
$('img').not(this).removeClass('active');
$(this).addClass('active');
});
CSS to add:
img.active{background:#00f;}
/* You need to add class to active thumb image using Jquery . make sure to add jquery path*/
$(document).ready(function(e){
$("#thumbs img").click(function(){
$("#thumbs img").removeClass("selected");/* this will remove selected class from all images*/
$(this).addClass("selected"); /* this will add 'selected' class to particular image where you clicked */
});
});
in css you can give whatever style you want to give using css
<style>
#thumbs img.selected
{
border:2px solid blue;
background-color:#eee;
}
#thumbs img
{
padding:5px;
}
</style>