Change Div Background Image With Link Hover

Apr 24, 2010

When I hover back and forth over a link in one area of a page, the background-image of a div in another part of the page needs to change back and forth. I have been trying all sorts of things in jquery with no results!

Here's the jquery script...
Code:
$function() {
$("#about-lifebook").hover(over,out);
function over (event) {
$(.spacer-bg-off).css("background", "url(images/spacer-content-bg.png)");
} function out (event) {
$(.spacer-bg-off).css("background", "none");
});

The link's id is "about-lifebook" and the div in question has a class of "spacer-bg-off". This ain't working at all. I just read this off of the jquery website: "The .hover() method binds handlers for both mouseenter and mouseleave events. We can use it to simply apply behavior to an element during the time the mouse is within the element." So perhaps the behavior has to be applied to the element being hovered over? How can I change the css of one element while hovering over another one?

View 1 Replies


ADVERTISEMENT

JQuery :: Background Image Swap On Hover Over Different Link

Dec 7, 2011

I'm trying to achieve an effect where background image will change once you hover over a different link, but not sure how to go about that...Here's what I got:

HTML
<ul id = "list">
<li id="home"><a href="#">HOME</li></a>
<li id="about"><a href="#">ABOUT</li>
<li><a href="#">PORTFOLIO</li>
<li><a href="#">WORK</li>
<li><a href="#">CONTACT</li>
<li><a href="#">GET A QUOTE</li>
</ul>

CSS
body {
background-image: url(Images/home.jpg);
} ul li {
list-style-type:none;
font-size:36px;
font-family:Impact, Charcoal, sans-serif;
} a:hover {
background-color:#7EB6FF;
-moz-border-radius: 15px;
border-radius: 5px;
width:40px;
} a:link {
text-decoration:none;
}

And JS should probably go something like this:
$("#about").hover(function() {
$(this).css("background-image", "url('Images/about.jpg')");
});

Though this only leads to image being show only partially (given that its li element only, I suppose).

View 5 Replies View Related

How To Make Text Hover State Change Background Image

May 26, 2010

I use sprites for rollover effects so the hover attribute just changes the background image position. Everything works cool with the rollovers. What I would like to do, is make a text link that when rolled over will change a separate background image to it's hover state. I should add, that the the rollover image has it's own div and is separate from where the text link is located. To get a visual you can check the website [URL] In the body section I would like to make each of the dark red section titles a link that when rolled over will change the hover state of the corresponding "more" button.

View 6 Replies View Related

Jquery :: Fade Out Link Background Hover Colour?

Nov 25, 2011

I have been trying all afternoon to achieve an effect where the background colour of a hovered on link in a list fades out slowly when the mouse rolls off it. I have found a few tutorials online which are similar to what I want to achieve (but none that are exactly right) like these:[URL].. but despite playing around with them for hours I have had no luck so far... in fact I have yet to have anything have any effect on my links whatsoever!

[Code]...

but this is not ideal for a couple of reasons - firstly as it is css3 it only works in modern webkit browsers and secondly there seems no way to have only a fade out without a fade in - in this example I would like the fade out to be longer but if I increase the transition time from 0.3s then the fade in becomes too long and it feels a bit clunky and unresponsive.

View 10 Replies View Related

CSS Hover Reset After Background Color Change

Aug 21, 2009

I have a few table cells that have the following class:
.tc {
some declarations
}
.tc:hover {
background color changed
}

And I have a cell that has an onclick event that calls a function. The function gets all the cells and does this to them:
cell.style.backgroundColor = 'transparent'; // or whatever else

And then the background color of a clicked cell is changed to indicate that it has been selected. The problem is: when I change a backgroundColor of the cells, their :hover states no longer work: if I try to hover the mouse over them - nothing happens.

View 2 Replies View Related

Changing Background Image On Hover?

Jun 30, 2011

I want javascript to change the background image on hover.

This is my javascript:
function navOver(obj){
var imgUrl = 'url(images/' + obj.id + '.hover.png) center no-repeat';
obj.style.background='imgUrl';
}
function navOut(obj){

[Code]...

View 5 Replies View Related

Properly Make Image Change / When Hover Over Main Image?

Nov 22, 2011

I was wanting to know how to properly make an image change when you hover over the main image.URL...And I want ALL the images to change as soon as you hover over each image.Now here's the problem. Whenever I layout my coding like that, when I hover over ANY image, an image I don't want to change, changes.So is there any way that I can get ALL images to work without having to create external JavaScript files?

View 4 Replies View Related

Onclick For Div Background Change And Link To Iframe?

Feb 2, 2010

I just cannot get the html to load for each linked button to the Iframe. If I remove the "onclick" command for the backround images, the links load to the Iframe. If I leave the "onclick" command in there only the background changes.So, I would assume there is a conflicting issue with loading the "a href" and the "onclick" commands together. Maybe I need to know how to do multiple "onclick" commands...suggestions?

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

[code]....

View 2 Replies View Related

Change The Background-color Of The Link Onclick?

Oct 11, 2011

l have got a series of menus. What l want to do is change the background-color of the link onclick.

What l have done use jquery like this

jQuery('.menu a').click(function(){
var clz = jQuery(this).attr('id');
jQuery(this).attr('class','active'+clz);
})

This is not work.The code needs to work on mobile phones

View 3 Replies View Related

JQuery :: Image Swap When Hover Over Link?

Jun 5, 2009

I'm trying to do a basic image swap when a link is mouseovered. The idea is that you hover over a group of links that is associated with that image, and the image lights up. I have different sets of links and images all over the page.markup looks something like this:

<div class="container-left">
<img src="/images/logo1-off.jpg" alt="" width="75" height="75" />
<div class="text">

[code]....

View 1 Replies View Related

HTML Link Hover Changing Image Somewhere Else?

Jun 20, 2011

I've been trying to make a html link <a> change an image right below the link. I need to do this for about 5 links (Navigation menu) and all the code I seem to stumble on and try does not work.

I have found the below code that works however it's setup to only replace ONE image. How can I set this up to accommodate about 4 more?

Javascript to make it all work

Code:
<script>
function changeimage(towhat,url){
if (document.images){

[Code]....

View 4 Replies View Related

JQuery :: Hover Doesn't Work When Change The Text Color Of A Link?

Sep 11, 2011

I have a simple menu as you can see in which i want the link that gets pressed to change color to grey.(line26).But before that (line25) i use jquery to change all the links back to their original color.But that line of code destroys my hover effect on all my links for a reason.

<head>
<style>
.link {
color: #fff;

[Code].....

View 3 Replies View Related

JQuery :: Change Background Position Via Separate Link?

Feb 25, 2010

I'm trying to change the background-position of DIV1 (a separate tag) when the following tag is hovered code...

View 1 Replies View Related

Change The Background Image Of A Webpage Every Few Seconds To A Different Image?

Oct 6, 2011

i want to change the background image of a webpage every few seconds to a different image... i've written this code but it doesnt seem to work.

<script language="Javascript">
window.onload = backgroundchange();
function backgroundchange()[code]...

View 3 Replies View Related

JQuery :: Control Hover Of Another Link With Current Link Hover

Jun 4, 2011

Umm, this is a tricky one to add a descriptive title for!

Basically I have two links on the page that go to the same page when clicked. What I want to do is when I hover over one of those links for the hover to work for both of them and visa versa.

So I have this links

<a class="connected" href="">Connected</a>
<a class="remove" href="">Remove</a>
a.connected { background: url(../images/connected.png) no-repeat 0 top; }
a.connected:hover { background: url(../images/connected.png) no-repeat 0 bottom; }

[Code]....

View 6 Replies View Related

JQuery :: Change Bg Image On Hover?

Aug 11, 2009

I have a dropdown menu. When the dropdown is hovered, I need a bg image to show, then slowly fade out when the mouse leaves. I wrote

[Code]...

View 1 Replies View Related

Hover Over Text To Change An Image?

May 20, 2010

personal website I am modifying for a friend. He basically has a list of links such as:

Home
Blog
Pictures
Links

What I want to do is that whenever you roll over, say, "Blog", an image appears to the right of the links (the image will be a small screenshot of what the blog looks like). When you roll over "Pictures", a different image appears in it's place.I already know how to do this when rolling over images, but not rolling over text. I used document.getElementById and just set the src to the image, but how do I do this when I just have text to roll over?[URL]

View 3 Replies View Related

On Hover Hyperlink Change Image

Oct 19, 2006

can anyone help with a script which will change an image in a different frame when you hover over a link in a navigation frame. i have mamanged to get the images to change within the same frame, but having trouble changing it within another frame. Code:

View 2 Replies View Related

Hover Over Text To Change Image

Mar 16, 2011

i have been trying 2 days to get it to work! basically the 3 image locations are in Variables in PHP

$piclocation1
$piclocation2
$piclocation3

What i want is when you hover over the div class "breaking-news", i want the div ID "latest-news-image" to change to that specific image background. example the top "breaking-news" class is on hover and the image $piclocation1 should show in "latest-news-image". if the middle "breaking-news" class is on hover the image $piclocation2 should show in "latest-news-image". i dont know if i got this in the right area as it would contain javascript, php and poss Css!

[Code]....

View 4 Replies View Related

JQuery :: On Text Hover Image Change?

Nov 16, 2010

I want this kind off effect [URL] using jquery.

View 2 Replies View Related

Change An Image To Its Hover State Based On Url?

Aug 31, 2011

I have 6 horizontal navigation image links on top of my site. The regular images are black n white, but on the hover they transform to a colored image. Each image leads to a different page on my site, I'm wondering if I can make the image corresponding to that page light up whenever on that page.

View 7 Replies View Related

JQuery :: Change Image-background After Sometime?

Jan 27, 2011

i need to know if there are a way to change the background image after a specific time like 10 sec or 30 sec...etc. you know like yahoo Login mail "it's changing the background daily!!" if there is a way using JQuery or CSS or html or any other thing

View 2 Replies View Related

Change Background Image With A Button?

Sep 13, 2010

I am trying to make a button that would change the background image of the whole document whenever somebody clicks it. I have tried something along the lines of this:

Quote: <input type="button"
value="Pattern1"
onClick="background-image: url(background.png);background-repeat: no-repeat;">
and,
Quote: <input type="button"
value="Pattern2"
onClick="background: url(background.png);background-repeat: no-repeat;">

My assumption to why it doesn't work is that I am combining javascript with CSS, but I am most likely wrong.

View 2 Replies View Related

Change Background Image With Dropdown IE?

Jun 29, 2009

this code works fine in Fireox but not in IE.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

[Code]...

View 2 Replies View Related

Change Background Image From Textbox?

Apr 19, 2010

Could anyone show me a script that would allow the user whos on my site change the background image from the default color to an image from a URL? And then it would have to save their choice in a cookie.

View 1 Replies View Related

Change Of Background Image Works In IE Only?

Jul 3, 2010

I'm using javascript to change the background image of a table field. I've found that it only works correctly in IE. In FF etc, it simply doesn't change.

What I have is:
Head
HTML Code:
function Info(infolink, titlelink){
document.getElementById('Info').src=infolink;
document.getElementById('subTitle').background=titlelink;

[Code]...

View 2 Replies View Related







Copyrights 2005-15 www.BigResource.com, All rights reserved