Change PAGE background (not element BG) on any element hover. - javascript

I've been trying to change my PAGE background whenever I hover over an element. Currently I've uploaded different images into my web server, I would like to change my page background from one of the images, to another image when I hover over a div. How would I go about doing this? It doesn't matter if it's javascript, jquery, or css, the more answers the better so that I could learn a new way to do this :)
My css:
body{
background: url(../html/dest/back2.png);
height: 100% ;
background-attachment: fixed;
}
I have uploaded a new image called back2a.png. I would like to load this image in place of my previous image (back2.png) whenever the user hovers over an element. (Any element)
Note: I would also like to maintain the background-attachment:fixed on the new image.
The new image is simply a change of hue/saturation done in photoshop, nothing drastic it's the same size and everything.
Here is the page I'm trying to do this on.
http://hourtimeagent.com/html/c++.php
I appreciate answers! thank you!

jQuery:
$("div").hover(function() {
$("body").css("background", "url(../html/dest/back2a.png)");
});
If you want to change it back afterwards you can use the jQuery .blur method:
$("div").blur(function() {
$("body").css("background", "url(../html/dest/back2.png)");
});
The div selector can be changed to anything you want it to be on hovering. For example, if you have a div with the id of hover, use something like this:
$("div#hover").hover(function() {
$("body").css("background", "url(../html/dest/back2a.png)");
});
Or a class of hover:
$("div.hover").hover(function() {
$("body").css("background", "url(../html/dest/back2a.png)");
});
Javascript
To use straight javascript you'd have to add events to the elements on your page that you want to change the background with. I'd stick with jQuery as it does it for you, but if you'd prefer to use just javascript on a div you'd add:
<div onhover="myFunc();"></div>
And then the javascript would look like the following:
<script type="text/javascript>
function myFunc() {
document.body.style.background = "url(../html/dest/back2a.png)";
</script>

Related

Change background color and image whilst hovering over 3 separate tiles/buttons

Currently my code is set to change background colors when I hover over 3 separate tiles. So far its working as expected but when I am trying to change the background image of a div nothing is happening.
p.s. I am a complete beginner and so far I am experimenting with code, I am aware that down the line I should create variables/functions in order to avoid callback hell
$("#basecamp-background").mouseover(function(){
$("body").css("background-color", "red", function(){
$(".dashboard").css("background-image", "url(images/1.png)");
});
});
First time posting here, not sure if the code will be displayed with the appropriate indentation, however I can assure you that it is.
Looking to change the background color and image when you hover over different tiles/buttons.
Your code is missing a closing bracket for one of the function statements, but I will assume that is just a typo in your question. The real issue is that you haven't formatted the background-image css value correctly.
Here is what it should say:
$(".dashboard").css("background-image", "url('images/1.png1')")
The url to your image has to be wrapped in quotes of its own. Using single quotes will fix this.
The css function of jquery doesn't have a 3th funtion paramter. You can place all code in the event handler function.
Also I recommend to use mouseenter event instead of mouseover. Mouseenter fires only once per time the user moves his mouse into the element. Mouseover will fire a lot of times when the user moves their mouse over the element.
$("#basecamp-background").on("mouseenter", function() {
$("body").css("background-color", "red");
$(".dashboard").css('background-image', "url('https://dummyimage.com/100x100/00f/f00')");
});
.dashboard {
height: 100px;
width: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="basecamp-background">hover this</div>
<div class="dashboard">testdiv</div>

Want to change an img src on hover, then to a different src on click

I have a div which contains an img - I want to be able to have the img src change on hover (and then back again when not hovered), but also have the same img change to a different src altogether when it is clicked (and then back again upon second click). So far I have the J-Query code to make it change on hover:
HTML
<div class="tab_box">
<img id="img1" src="tab.png">
</div>
J-QUERY
$(document).ready(function(){$('#img1').hover(function(){$(this).attr('src','tabt2.png')},function()
{$(this).attr('src','tab.png')}) });
But I am unsure how to then make the change to a different src altogether if clicked (as the image will have to be being hovered over to click it!) Can anyone suggest? For various re-sizing reasons, I want to keep the image as a stand alone image within the div, instead of having it as a background-image of the div, if possible
You can use the .hover() and .click() functions of Jquery. What you have used has syntax problems
Here is the correct code:
$('#img1').hover(function () {
$(this).attr('src', 'http://www.fateheducation.com/fatehnew/Testimonial_Image/avatar-small.png');
});
$('#img1').click(function () {
$(this).attr('src', 'http://moduleoff.com/sites/all/themes/moduleoff/images/xdruplicon_rotated_small.png.pagespeed.ic.Xl8nCuL4lR.png')
});
Working Fiddle

Changing a transparent images background color after clicking on a seperate div

I am trying to add a background color selection to an E-Card site I am making for an assignment in college.
I have the button and the background set up, but cant seem to get the JS for it to work.
I am a newbie with javascript/jquery, so I'm aware I am probably making a ridiculous mistake, but my code so far is:
$(".pink").on("click", function() {
$(".card-preview img").css("background-color", "red");
});
Where ".pink" is the button you would press to the the background color of an image inside the "card-preview" div.
This way seems relatively simple, but doesn't seem to be working!
Any ideas/suggestions?
The .pink div has a dual class on it, the second class is ".box", which sets the size as there are a few intended color selections available.
The page in question is linked here: http://www.remotegoatdesign.com/sayhey/pages/edit-valentines-marc-card.html
Rewrite your code to:
$(function() {
$(".pink").on("click", function() {
$(".card-preview img").css("background-color", "red");
});
});
or place on bottom of page, berofe </body>
This makes your code run only after the DOM is loaded.
.card-preview img: you are changing the background colour of the img elements inside the div, not the div itself.
try using .click() it worked fine for me. check my fiddle
edit
noticed your selection divs for colors show class='box pink' i changed my fiddle to match.
edit
for the comment below: fiddle

Text on image mouseover like youtube

How can I show text on top of my images when a mouse moves over them.
For example you see on youtube you have an add to playlist button on the thumbnails. How can I setup something similar but for a like button.
I am not looking for a tooltip. I want the text to shown on the image when the mouse is hovered over it.
Put each of your images inside a seperate "container" div. These divs should have the position: relative attribute. Give all the images the class name 'singleImage' Put another div inside of this each of the "container" divs with position: absolute and display none. Set the class name for these divs to 'toolTip'. This div will be the tooltip. Put a title attribute on your images. You will need jQuery to rig up the hovering or plain javascript if your feeling adventurous
In jQuery you would do something like:
$('.singleImage').mouseover(function(){
var tt = $(this).parent().find('.toolTip');
tt.html($(this).attr('title'));
tt.show();
});
$('.singleImage').mouseout(function(){
var tt = $(this).parent().find('.toolTip');
tt.hide();
});
you are looking for tipsy I think
The functionality you are referring to is called a "tooltip". There are plenty of different plugins ciruclating out there that you may be able to utilize. Without having specific code, it will be hard for anyone to present a tailor-made solution.

Javascript knocks out CSS:hover?

Hi im trying to make the Product Categories menu work on this page:
http://www.jaybrand.co.uk/p1.html
at the moment the page loads and CSS hover works to set the background position so that the graphic behind makes a roll over effect.
i put some javascript to set the background position to the roll over on click, but this knocks out the CSS hover:
onclick="setStyle('c1','backgroundPosition','0px 0px');
it means that c1:hover no longer works.. i tried putting !important in the CSS c1:hover background position and this fixed it in Firefox but not IE.
How can i write something in Javascript to also say:
onclick="setStyle('c1:hover','backgroundPosition','-276px 0px');
......... i know Javascript does not do hyphens and the way to get for example "background-position" in CSS is to ditch the hyphen and make "P"osition capitol. perhaps something can be done also to get to the CSS hover attribute?
When you set an element's style.backgroundPosition, it's the same as setting an inline style="background-position: ..." attribute. Since inline style attributes override stylesheet rules, the hover/non-hover rules can never again affect the background position.
You could remove the backgroundPosition rule for elements being unselected so that the stylesheet rules can shine through. But really, your code needs a serious refactoring: manually setting every background position in the onclick is ugly and unmaintainable.
Instead, switch a class around to flag the selected link, eg. styled like this:
.c { background: url(...); }
#c1.selected, #c1:hover { background-position: -276px 0; }
#c2.selected, #c2:hover { background-position: -276px -61px; }
...
markup:
<h2><a class="c selected" id="c1" href="#productcats">Products</a></h2>
<a class="c" id="c2" href="#rice">Rice</a>
...
(a-inside-h2 because the other way around is invalid.)
script:
var selected= $('#c1');
$('.c').click(function() {
// Move the 'selected' class to the new element
//
selected.removeClass('selected');
selected= $(this);
$(this).addClass('selected');
// Scroll target element into view
//
var y= $(this.hash).offset().top-$('#slide').offset().top;
$('#slide').animate({top: -y+'px'}, {duration: 450, queue: false});
return false;
});
Note this uses the href of the links to point to where they go, which will improve accessibility on non-visual browsers. You should also add some code to look at the location.hash on page load and if you see something there, scroll that page into view. Otherwise, it will be impossible to bookmark one of your subpages, or to middle-click-new-tab the links or anything like that.
I was doing something similar the other day, not 100% sure but this might help push you in the right direction..
onclick="document.getElementById('c1:hover').style.cssText='backgroundPosition: -276px 0px;';"

Categories