Tracking Forums, Newsgroups, Maling Lists
Home Scripts Tutorials Tracker Forums
  Advanced Search
  HOME    TRACKER    JavaScript


Advertisements:










Change CSS Text With Mouseover On Image?


I've got a series of buttons as .gif images. Under these buttons there are small single-word descriptions, as CSS text. Is there a way to pass with the mouse over the image and - while doing this - make bold, change the color or highlight the text below the image? I know it would be simpler just to get rid of the CSS text and insert it into the gif image (a simple rollover effect), but I believe a text effect would be nicer..


View 2 Replies (Posted: Feb 18, 2003, 09:26)

Sponsored Links:

Related Forum Messages For JavaScript category:
Text Swap - Change Each Image To Different Image On Mouseover
I'm failing to get a pure CSS way to achieve this, so trying JS. Several small images in a row, each different. Want mouseover to:

1. change each image to different image on mouseover (each image has its own mouseover image version).

2. produce different paragraph of text below row of images on each mouseover.

I can achieve it with mouseover on text links or on an image, but not with the two events, viz mouseover image swap + mouseover text swap. Would also want to be able to style the text.

Posted: June 15th, 2010, 07:17 PM

View 4 Replies!   View Related
Mouseover Text To Change Display Image
I am new to JavaScript and I am having a difficult time finding what I thought would be easy to find.I have 4 text strings that when a user runs his/her mouseOver, I'd like to display a corresponding picture in a display area. I thought that would be easy enough. However, it gets a bit complicated for me since I am also using CSS to position the display area. For some reason all I can find out there are examples using HTML tables for display image positioning. I don't want to use tables. I'm not sure if this will make a difference but my style sheet is external. Also, the text does not link/go to another page.

Posted: 09-23-2009, 09:34 PM

View 6 Replies!   View Related
Change CSS Text Style On Image Mouseover
I am trying to set up on a site I am working on so that the text color (preferably the CSS style) changes when I mouseover on an image elsewhere on the page. I know all about changing the current item or placing the image and text in the same div and controlling that, but I cannot place them in the same div.

Posted: Jun 16, 2009

View 2 Replies!   View Related
Can Mouseover Be Used To Change Different Image?
I am quite new to JavaScript code and have a challenge. I would like to add a mouseover script to several different images e.g. Manufacturer logos which would cause a background image to change accordingly. There are eight different logos which would refer to eight background images respectively. I have found several scripts which cause the image which has the mouseover to change but not any which cause a different image to change. Is this practical using JavaScript?

Posted: 09-23-2011, 12:30 AM

View 3 Replies!   View Related
Can A Mouseover Be Used To Change A Different Image
I would like to add a mouseover script to several different images e.g. Manufacturer logos which would cause a background image to change accordingly. There are eight different logos which would refer to eight background images respectively. I have found several scripts which cause the image which has the mouseover to change but not any which cause a different image to change.

Posted: 09-22-2011, 06:46 PM

View 1 Replies!   View Related
How To Change Div Background Image In Mouseover
I have 7 thumbnail image menus.when user points(mouseover) to a particular thumbnail, I want to change the background-image of <div> to the regarding image of that thumbnail. Thumbnail images menu are in a diff div.

Posted: Jun 21 10 at 12:56

View 3 Replies!   View Related
Mouseover Change Image Color
I have a big grid of images. When a user mouseovers an image I want the image to tint blue 0000FF. Is there a way to do this in JS or jquery? Ideally, I wouldn't have to apply a class to each image. This treatment should affect all images on the screen.After searching the forums here and elsewhere I learned that some folks use a div over the image that has a color and opacity, but how would I apply that to all img?Another thing I keep seeing is paintbrushJS and pixastic but I don't know how to make those work for this purpose.

Posted: Mar 3 at 18:55

View 4 Replies!   View Related
Looking For An Image Change On Mouseover Link?
Does anyone know of a jquery plugin or a simple javascript which could allow me to change the image depending on the text link I hover over with a mouse.The image is fixed in one spot, and the links are displayed below. As I hover down the list of links, the image above changes.

Posted: Dec 9 11 at 20:36

View 2 Replies!   View Related
Change Image Button On Mouseover?
I want to change the image button from green to yellow on rollover.Here is my CSS code

a#try-it-button {
width:273px;
height:47px;

[code].....

Posted: Aug 16 11 at 20:20

View 2 Replies!   View Related
Change Text Within A Tag On Mouseover?
I have defined a tag in which on mouseover i am changing the text within the a tag

<a class="bid-addwatchlist add-logout" href="/users/login" onmouseover="changeText(this)" onmouseout="sameText(this)"><span style="font-size: 32px; line-height: 18px;">+</span><span style="font-size: 14px; float: left;">Add to watchlists</span></a>

[Code]....

It is working fine but the problem i am facing is when i do mouseover the text changes to login and if i click on the login text nothing is happening whereas if i click on other side areas it is working. I am not understanding the problem why this is happening and what i need to do now so that if i click on the login text it works. All i need to do is i want to change the text within the a tag onmouseover and consequently it should work.

I have also tried this, defined the click event in the span for the text, but not working

function changeText(theTag){
theTag.innerHTML = '<span style="font-size: 1.7em; text-align:center; line-height:50px;" onclick='window.location="/users/login"'>Login</span>';
}

Note: The text is just a normal link

Posted: Sep 29 11 at 11:40

View 2 Replies!   View Related
Image Change On Mouseover (code Faulty)?
this is my first thread here and I am a beginner programmer Java/HTML/CSS only. I used google to add an interactive feature to my website that some people may be familiar with. I wanted to make an image that changes into another image when you mouse over it. Maybe there is a problem with how I integrated it into the rest of my webpage code. I am using angelfire to build my website and am a little disappointed that they don't have their own forum but this one looks really good. Following is my code that can be examined and possibly corrected.

<html>
<head>
<style type="text/css">
body {background-color:gold;}
table
{
width:70%;

[Code]...

Posted: 07-16-2010, 07:16 AM

View 4 Replies!   View Related
Drop Down Menu And Image Change On Mouseover?
I'm looking to take some images, and then once a mouse over a drop down menu appears, and it also changes the image of the button. Anyone know of a way to do this?

Posted: Jun 3, 2007, 10:16

View 4 Replies!   View Related
Image Change On Mouseover With Form Dropdown?
I'm in the middle of teaching myself PHP and SQL so I'm only at the paste-and-tweak level with Javascript. Bear with my newbie-ness.I've seen a few solutions for creating a form dropdown menu that changes a nearby image based on what is selected. I want exactly that, but is it possible to have the images also appear on mouseover? I found a menu solution using CSS, but when I applied it to a form, it didn't work. Can anyone put me in the right direction on how to do that? I've started with this code, but need to tweak it to do this if possible:

<html>
<body>
<table border="0" cellspacing="0" cellpadding="0">

[code].....

Posted: 08-03-2010, 08:14 PM

View 11 Replies!   View Related
Change Label Text On Mouseover In Asp.net?
In asp.net, when the user mouses over a button, I'd like to change the text of a label to explain what the button does. Then when they mouse-out of the button, the label should go back to its default text.What is the best way to achieve this? Are there ASP.net controls for this? Or should I just code custom javascript?

Posted: Oct 11 11 at 16:55

View 3 Replies!   View Related
Jquery :: Change Background Image Of Div On Mouseover Of A Link?
What I want to achieve

I want the background image of div to change on the mouseover of a link within the said div.code...

Posted: Sep 10 11 at 22:45

View 2 Replies!   View Related
Mouseover Image To Change Rollover State Of Link
Here is an example of what is done so far: [URL].
When you mouse over the b&w images you will see the image change to color.
When you mouse over the links on the left they will have a rollover and also change the image on the right to color.

What I would also like is mouseover the image to change the rollover state of the link on the left. Here is my code so far..
PHP Code:
<styletype="text/css"><!--/*=================================*//*======SubjectMatterRollovers======
*/#menuButton1{height:41px;width:133px;
overflow:hidden;background:
url(images/content/buttons/subjectmatter.png)topleftno-repeat;
display:block;text-decoration:none;line-height:2.5em;color:#000000;}
#menuButton1:hover{color:#FFFF00;

I thought the following might work (2nd image)
Code:
document.getElementById('link2').class='menu_hover';
But as you see no it does not.

Posted: Mar 19, 2010

View 5 Replies!   View Related
JS Change Background Image (of Page Not Element) On Mouseover?
I want to find out how load a different background image for the whole page when you mouseover the links. The fullscale background image uses the js script called Fullscreenr.

The background image for this page is given an id Any ideas? I don't even know how to to search for the correct terms here.[URL]...

Posted: Feb 24 11 at 19:43

View 1 Replies!   View Related
Jquery :: Mouseover - Change Image Inside <p> Tag On Mouse?
my code-

<td>
<p align="justify" id="prodetail"><img src="images/PostQuote.png" id="protext">Airspot recently realeases a revolutionary wireless router that can help your WiFi router go social.

[code]....

Posted: Oct 24 10 at 8:49

View 1 Replies!   View Related
Causing Text To Change Color On Mouseover?
I want to make a piece of text fade from black to white while someone puts their mouse over it and change it back to black when they move their mouse away. I did it with the following code, but I'm wondering if anyone would do some (or all) of it a different way.

//convert RGB values to hexidecimal
function RGBtoHex(color) {
var digits = /(.*?)rgb((d+), (d+), (d+))/.exec(color);
var R = parseInt(digits[2]);

[Code]....

Posted: 11-09-2010, 09:54 PM

View 3 Replies!   View Related
MouseOver Event To Change TD Background And Text?
I need to change the td background to grey and text in another td when the user's mouse goes over the first mentioned td I have done this so far:

<td onMouseOver="this.style.background='#f1f1f1'" onMouseOut="this.style.background='white'">

but this only changes the background of the first td and does not change the text in the second td

Posted: Feb 4 11 at 12:02

View 2 Replies!   View Related
Image And Text Display On Mouseover
I used this script and it is working fine. I changed those two images and put my own. Image1 is of 600 width and 340 height and Image2 is of 560 width and 794 height.

The code is working fine but the tool tip window resizes automatically
and shows up the image. How can I have a fixed height and width? Which
line should I change so that the height and width of the tooltip window
is constant?

I tried changing var tipWidth = 160; but no effect tried playing with var startStr = '<table width="' + tipWidth + '"><tr> but again no effect.

I want the tooltip window to be constant and the picture size should be resized to fit in that tooltip window and aspect ratio for height and width should be resized automatically.

Posted: April 9th, 2006

View 9 Replies!   View Related
Text Fade-in On Image Mouseover?
I'm trying to form a script and the appropriate calls to fade-in some text on the event of an image mouseover. Here is what I'm working with:

<html>
<head>
<script type="text/javascript">[code]......

I know there are problems with this. It looks wonky to me and I don't even know what I'm doing. It's a mashup of some code I found somewhere and my own bad guesses at how to fill in the gaps.

Posted: 04-20-2010, 12:46 AM

View 1 Replies!   View Related
JQuery :: Change Background Image On Mouseover But Not If Element Is Selected?
I need set a background image on mouseover, but not if the element is selected.

Im using the jscrollpane:[URL]... I need I need the scrollbar (div.jspDrag) to have a different background image when a users hovers their mouse over it. However I need the background image to change back to its original when the drag the scrollbar.

The hover pseudo-class is standard, but how do i recognize if the element is being dragged? Should I have a jquery listener to see if the mouse button is being held down?

[Code]...

Posted: Mar 22 11 at 10:07

View 2 Replies!   View Related
How To Change Menu Text Color With Mouseover On Webpage
I can't figure out the code to perform this task. I need to change the menu's text color with a mouseover on a webpage. The menu consists of 7 text links. Each one is a different color. The mouseover is to change the text link to orange while the other 6 menu items change to purple.

Posted: 03-14-2009, 09:07 PM

View 11 Replies!   View Related
Copyright 2005-08 www.BigResource.com, All rights reserved