Member Avatar for ivan3510

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 because: n/a
  • 3 Contributors
  • 4 Replies
  • 116 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by hielo
Member Avatar for Taywin

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 because: n/a
Member Avatar for ivan3510

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

Member Avatar for Taywin

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.

Member Avatar for hielo

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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.