[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Using javascript to make background darker on mouseover

Posted on 2007-08-04
7
Medium Priority
?
288 Views
Last Modified: 2013-11-19
Hi Everyone,

I'm trying to create a grid layout in CSS that consists of "boxes" with a width and height of 200px. Inside these boxes will be a small picture and a short description.When moused over, the background of the box changes from grey to light grey and when clicked on, it will go to another webpage. How do I do this with Javascript?

Thanks,
Max
0
Comment
Question by:Maxwellb
  • 3
  • 2
5 Comments
 
LVL 54

Accepted Solution

by:
b0lsc0tt earned 2000 total points
ID: 19632486
You use the onmouseover event for the color change.  In Javascript something like ...

<div onmouseover="this.backgroundColor = 'gray';">

To have it go to a page when clicked then use ...

onclick="document.location.href = 'newpage.htm';"

You can put that in the div or another tag.  Use a URL or a relative page link.

Let me know if you have a question using this or need more info.

bol
0
 

Author Comment

by:Maxwellb
ID: 19632597
Hi,

Thanks for your quick response! I've used your suggestions to create a test page:

http://members.shaw.ca/max.b/

Almost everything is working great. The only problem is that if the text stops at a certain point within the box, so does the mouseover color change. Is there any way to solidify the height and width of the mouseover at 200px?

Thank You,
Max
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 19632628
For that page I would move it (the background color and the onmouseover) to the table tag.  That will still change but should fill the whole table.

bol
0
 

Author Comment

by:Maxwellb
ID: 19633172
Hi b0lsc0tt,

I've updated that link on the previous post to your latest recommendations, but unfortunately, it only changes part of the box to the mouse over color (the opposite part of the table that it changed before).

Thanks,
Max
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 19633219
OK, that is probably because the background color is not usually inherited in the table elements.  I never remember exactly how that works but it makes sense.  Of course make sure you don't specifiy a white background color somewhere in your code but if you don't put the style attribute below in the td tag (maybe the tr instead or also).

<td style="background-color: inherit;">

Let me know how that works or if you have a question.

bol
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

873 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question