Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

change image with css onmousedown

Status
Not open for further replies.
tiamat2012

tiamat2012

Programmer
Dec 12, 2004
144
US
Does anyone know how to do it? I'm using the current code to do a rollover, but I would like the image to change again when they click on the picture.

Code: 
a img.menu
{
 				filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/UNhome.png');
				border-style:none;
}

a:hover img.menu
{
 				filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/HOVhome.png');
}

The filter just allows me to have transparency in IE with png files.

I tried a:active img.menu but that didn't work either, does anyone know how I could do it? I would have to change the style if I were to use javascript, but I would rather not use javascript in the first place.

-Kerry
 
Sort by date Sort by votes
:active is the same as onmousedown, so it should work. Meaning, while you're hovering over the image and holding the left mouse button, :active will be triggered. What exactly are you trying to do? Maybe if you reword your request, we might find a better solution.
 
Upvote 0 Downvote
I'm making a rollover button, with three pictures

the "filter:" sets the picture (in this case).

ideally the lines of code that I would need are:
Code: 
a img.menu
{                filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/UNhome.png');
                border-style:none;
}

a:hover img.menu
{                 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/HOVhome.png');
}

a:active img.menu
{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/CLICKhome.png');
}

if you want to see the website, its kerryj.atspace.com, but it must be viewed in internet explorer 5.5 and up(until I get browser detection implemented)

hope this explained it better,
Kerry
 
Upvote 0 Downvote
The thing is, that wouldn't work for a png, that would work with a gif, which is low quality.

I tried to adapt the methods, but the problem is I'm not setting a background image, I'm using a filter, and I don't think I can change the location of the image using the filter.

My method, just so you know, will support all browsers once I'm done with it, I just need to know how to get the

a:active img.menu

to work.

Thank you for the link though, was a good read.

-Kerry
 
Upvote 0 Downvote
Well, IE certainly understands the [tt]:active[/tt] state, just test it with this:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html lang="en">
<head>
  <title>Test</title>
  <style type="text/css">
a { color: blue; }

a:hover { color: green; }

a:active { color: red; }

  </style>

</head>
<body>
<p>
<a href="#">Testing</a>
</p>
</body>
</html>
I suggest you use a similar test harness to check the feasibility your method - there may be other rules on your current stylesheet that are conflicting with your :active rule. I can't say for sure, as the CSS for the URL you've pointed to doesn't appear to have any [tt]a:active img.menu[/tt] rule.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
I've found that it only doesn't work in internet explorer.

As for it not being there, I had it removed because it wasn't doing anything.

It's there now,
the code section is:

Code: 
* html a img.menu 
{
  background: url(images/blank.gif) no-repeat 0 0;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/UNhome.png');
	border-style:none;
}

* html a:hover img.menu
{
 				filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/HOVhome.png');
}

* html a:active img.menu
{
 				filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/CLICKhome.png');
}

If you notice, right about it is

Code: 
a img.menu
{
 	width: 130px;
	height: 55px;
	background: url(images/allthree2.png) no-repeat 0 0;
	border-style:none;
}

a:hover img.menu
{
 	background-position: -130px 0;
}

a:active img.menu
{
 	background-position: -260px 0;
}

For other browsers, and it works fine.

-Kerry
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
740
3esolar
3
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
785
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
622
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
664
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top