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
ADVERTISEMENT
Sep 5, 2011
I have a jQuery script that when you hover over a link a text bubble on mouseover will pop up... but I am trying to make the text bubble load when the webpage does instead of having to hover over the link. ( instantly load the text bubble when the page does )
[Code]...
View 2 Replies
View Related
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
Sep 24, 2009
Is it possible to swap the link image that is hovered with another image and at the same time swap different images on another place on the page? I was trying to do it in CSS but I couldn't figure out how to do both at the same time. Basically I want to go from:
after hovering over linkimg1. I can get it to do both separately but not at the same time unless I am missing the combining factor or something. Let me know if you need anything else (i.e. site, missing code) Here's the code I'm working with:
HTML Code:
[Code]...
View 1 Replies
View Related
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
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
View Related
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
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
Jun 17, 2011
I have a menu with 4 links and 4 images associated with them. By default, the image from link 1 is displayed on the page. I would like to change the image with its corresponding one, each time i mouseover one of the other three links.
I'm trying to make the following code work unsuccesfully
In the <head> section i have this:
<script type="text/javascript">
img1 = new Image();
img1.src = "images/party/party.jpg";
[Code]....
I would like when i point to Icecream, the picture on the left to change to the Icecream picture and so on.
View 9 Replies
View Related
Mar 27, 2010
I am looking for a way to change an image when a link is hovered over. I should make it clear that it is not the list/link image i want to change but an image along side in order to "illustrate" the content.
View 1 Replies
View Related
Nov 2, 2010
Got an assignment for a javascript class and I have been banging my head against the wall for a week now.[code]In the main page I have tried several different ways to access the "src" property of the image, none of which I am 100% sure is correct. I think the problem is in the main page, in that I am not accessing the image right, but I could be wrong. I have spent hours on google and digging through the book, but I am still coming up empty handed.
View 1 Replies
View Related
Apr 14, 2009
I have a JS which I have already started to try to customise, but I am having some difficulty with it in that when I click on an image, it does not take me to my html page.with care.html. Although all files are in the same folder, I get an error indicating that the fille cannot be found (I have checked the file name spelling). I am not doing any of this online as the Web pages, when working, will be put on CDs.
View 7 Replies
View Related
Jan 12, 2011
I currently have a normal link like Code:<a href="http://sitepoint.com" class="link">sitepoint</a> and when a user clicks on it I want to be able to change the "link" class to a different class. However, I don't want to add anything to the actual link html. Is it possible to do this using javascript without modifying the original link code?
View 4 Replies
View Related
Feb 15, 2009
The following script produces a box that opens on mouseover and closes on mouseover.
Code:
$('#triggerReg').hover(function(){
// do something on mouse over
$('#menuReg').show();
[code]...
It works fine for displaying brief text messages. But if you display a column of links, it closes as soon as you try to put the cursor over a link. how to modify this so that the menu stays open until you manually close it again? I changed hover(function() to click(function(), and it now opens when you click it - and it stays open. But I can't figure out how to close it.
View 1 Replies
View Related
Feb 2, 2010
I just started using jQuery and I wanted to know how I can change the background-image when I hover my cursor of a li.
[Code]...
View 2 Replies
View Related
Aug 2, 2005
Since IE does not support hover for elements other then link I would like to use an event listener via attatchEvent to change the style of the row when the mouse is over and then again when it is out.
myElement = getElementById("row2");
myElement.attachEvent("onMouseOver", IEmouseOver);
myElement.attachEvent("onMouseOut", IEmouseOut);
<table>
<tr id="row1"><td>Row 1</td></tr>
<tr id="row2"><td>Row 2</td></tr>
</table>
What I am sketchy on is how to create the functions to change the row background color.
View 4 Replies
View Related
Oct 11, 2011
I tried to create a mouse over effect using jquery. When user hovers #box1_trigger link, the #service_box1 div should change it's background position. The code I created is the following it's not working for some reason.
html:
<div class="service_box box1" id="service_box1">
<a href="#" id="box1_trigger">
<h3> </h3>
<p> </p>
</a>
</div>
javascript:
<script type="text/javascript">
$(document).ready(function() {
$("#box1_trigger").hover(
function() {
$("#service_box1").stop().animate({backgroundPosition:"(0 -250px)"}, "slow");
},
function() {
$("#service_box1").stop().animate({backgroundPosition: "0 0"}, "slow");
}
);
});
</script>
css:
#service_box1{
width:318px; height:282px;
float:left;
background:url(images/services_panel.png) 0 0 no-repeat;
}
a#box1_trigger{
width:100%; height:100%;
float:left;
display:block;
}
View 7 Replies
View Related
Jun 10, 2010
To have all the :hover subclass fade from their passive states, instead of changing instantaneously? i just can t figure if such an effect can be done.
View 1 Replies
View Related
Jul 6, 2011
Ive got a small image of a power button and when pressed the inner section on the button changes to yellow, but when its pressed down Im also trying to get part of my H1 (main header logo title) to change to yellow.
Ive created a span with an id surrounding the letters of the H1 that I want to change, the id being : "power";
The javascript that I have come up with so far and works is as follows:
<img id="poweron" src="http://www.sitepoint.com/forums/images/power.png" alt="Power on button" onmousedown="this.src='images/poweron.png';" onmouseup="this.src='images/power.png';"/>
I understand Im not really supposed to be using inline JS, and I know Ive got to create a function for the onmousedown event to trigger changing the H1 text, so am I under the right impression that the JS so far written is redundant and will have to be re-written so thats contained within a script placed just before the closing </body> and an external script for invoking the main function ?
View 2 Replies
View Related
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
Aug 29, 2011
I have a bunch of links which display a given record based on the id in the URL. I would like to be able to hover over the link, and preview the record. The code below kind of works, and a live example is located at [URL]
If the user, however, moves the cursor quickly from link to link, the code seems to get confused over which one it is hovering over. Also, sometimes the hover preview doesn't go away after the cursor is moved from the link.
I've spent quit a bit of time, and haven't figured it out. I think it might have something to do with namespace which is a definite weakness of mine.
HTML Code:
<!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">
[Code]......
View 4 Replies
View Related
Mar 1, 2011
How can i make my navigation arrows hover by replacing them with the following image:images/box_arrow_hover.gif
View 2 Replies
View Related
Aug 24, 2009
I need to get the css hover color of an element. Since hover is a pseudo class of a class or id, I do not see a way of returning the color. I tried: $('.contentArea a:hover').css('color'); but it does not return the hover color. I understand that jQuery probably traverses the inline styles and there is no way to set the hover pseudo class inline, hence the reason for the .hover function. Is it possible to find and return the hover color with jQuery. If so how?
View 3 Replies
View Related
Jan 30, 2011
I want to animate a div when i hover on my "Home" link, the animate would expand the div with the content in it...how can i achieve this using jquery ?
View 3 Replies
View Related
Jul 11, 2009
I'm trying to make script that displays a tooltip when you hover over something, like a link. But it doesn't work and I have no idea why.
This is my script:
set the function that will draw the tooltip
function tooltip(header, content, w, h) {
get the tooltip element
var tooltip = document.getElementById('tooltip');
set the browser variable
var browser;
check what browser the use is using
if (document.all) browser = 'ie'; Internet Explorer
else if(document.layers) browser = 'ns4'; Netscape 4+
else if(window.navigator.userAgent.toLowerCase().match('gecko')) browser = 'gecko'; Mozilla
set the mouse coordinates
var x = event.clientX;
var y = event.clientY;
change the tooltip's width
tooltip.style.width = w;
change the tooltip's height
tooltip.style.height = h;
check if the header is empty
if (header.length = 0) header = 'Help';
change the content in the tooltip
tooltip.innerHTML = header + '<br>' + content;
change the visibility
tooltip.style.visibility = 'visible';
set where to draw the tooltip
tooltip.style.position = 'absolute';
tooltip.style.top = y;
tooltip.style.left = x;
tooltip.style.zIndex = 9999999;
} set the function that hides the tooltip
function hide_tooltip() {
get the element
var tooltip = document.getElementById('tooltip');
hide the tooltip
tooltip.style.visibility = 'hidden';
}
This how I'm using it on link:
<a href='java script: void(0)' onmouseover='tooltip("","This is a tooltip",100,50)' onmouseout='hide_tooltip()'>?</a>
View 11 Replies
View Related
Jun 22, 2010
Is there a way to change html tags without touching the inner html? For example, changing all h4 elements to an h2. Maybe something like this? jQuery('h4').replaceWith('<h2>' + (this).html + '</h2>');
View 5 Replies
View Related
