0

Hi!
Sorry for my bad english!
I made an editor. When user passes mouse over the picture, the picture changes color (
Here's code:

<style>
.button:hover{
filter:alpha(opacity=20);
opacity=0.2;
}
.field{
background:#aabbcc;
border:1px solid black;
}
</style>
<fieldset class=field>
<img src=blablabla.bmp class=button>
</fieldset>

)
I want to make that, when user passe mouse over this picture, around the picture creates a border, (1px solid blue), and the background color is 'lightblue' with 'opacity=0.6'. How to do that?
(PS: I want to make like editor on this site (daniweb)!)

Edited by ivan3510: n/a

3
Contributors
4
Replies
5
Views
6 Years
Discussion Span
Last Post by hielo
0

You can partially achieve this by using onmouseover event. You can change the CSS of image opacity and border style, but you cannot change the image's background color using CSS (but you can swap image out).

Edited by Taywin: n/a

0

I wonder how is this done on this page (also, on the daniweb editor)?

0

What they do on this website is to enforce a certain string format (customized tag style), replace the string with real HTML code, and then display it. The difficult part (but easy if you understand it) is to detect and add the customized tag into the text area where you type in.

0

You can change the CSS of image opacity and border style, but you cannot change the image's background color using CSS

You can if you have the right type of image. What you need is to use images with TRASPARENT backgrounds.

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

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>hielo</title>
		<style type="text/css">
		<!--
			img.editor{background-color:white;border:1px solid white;}
			img.editor:hover{background-color:yellow;border:1px solid blue;}
		-->
		</style>
	</head>
	<body>
		<img id="code" class="editor" src="http://www.daniweb.com/rxrvbimages/editor/bold.gif" alt="Bold">
		<img id="code" class="editor" src="http://www.daniweb.com/rxrvbimages/editor/createlink.gif" alt="">
	</body>
</html>
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.