div ve hover işlemi???

Merhaba arkadaşlar,

<div>
<a href="#" target="_blank">
blabla
<img src="http://www.siteadı.com/resimadresi.png"/>
<span>
&raquo;blablabla
</span>
</a>
</div>

Bu yukarıdaki kodun üzerine mouse over yaptığımda, üzerine mouse işaretçisi ile geldiğimde bu yazının sağında yada solunda belirttiğim yerde bir resim çıkmasını istiyorum, fakat olmuyor.
Nasıl yapabilirim?
Teşekkür ederim.
iyi çalışmalar
Not: bilerek alt alta yazdım kodu daha rahat okunabilsin diye umarım olmuştur.

bu js ile yapılabilir konu yanlış yerde

Merhaba Arkadaşım,

Nette bir çok yöntem var fakat olmuyor ya ben acemiyim yapamıyorum ayda browser (tarayıcı ) tanımıyor bzı elementleri belkide ama css ile yapılabiliyor.

Js ye girmeyim dedim ama sanırım şimdi js ye de bakacağım.

css ile yapılır fakat sadece firefox destekler
boşu boşuna firefox kullanın diye bağırmıyoruz

zaten FF kulanıyorum , fakat olmuyor a:hover elementi çalışıyor ama div hover için kodlarım çalışmıyor büyük ihtimal acemiliğimden, js den gözüm korkuyor birde yığınla kod şurada 5 satır kod yazıp işi bitirmek varken.

GErçi benim kide biraz şeye benzede, ayranım içmeye burası neresi hesabı

bir örnek verim
bu kodumuz

<div id="xfreex">
</div>

bu da css dosyamız
#xfreex{
width:200;
height:200;
background-color:#FFF000;
}
#xfreex:hover{
background-color:$F076H7;
}

bu kadar

Üstteki örnek olur.

Bu da js ile olanı.

<div id="div" style="background-color:yellow" onmouseover="this.style.backgroundColor='black'" onmouseout="this.style.backgroundColor='yellow'">D iv</div>

FF & Opera & Safari & IE5+
Tarayıcılarda tam performans çalışan bir behavior bulunmakta...

<attach event="ondocumentready" handler="parseStylesheets" />
<script>
var csshoverReg = /(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i,
currentSheet, doc = window.document, hoverEvents = [], activators = {
	onhover:{on:'onmouseover', off:'onmouseout'},
	onactive:{on:'onmousedown', off:'onmouseup'}
}

function parseStylesheets() {
	if(!/MSIE (5|6)/.test(navigator.userAgent)) return;
	window.attachEvent('onunload', unhookHoverEvents);
	var sheets = doc.styleSheets, l = sheets.length;
	for(var i=0; i<l; i++) 
		parseStylesheet(sheets[i]);
}
	function parseStylesheet(sheet) {
		if(sheet.imports) {
			try {
				var imports = sheet.imports, l = imports.length;
				for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);
			} catch(securityException){}
		}

		try {
			var rules = (currentSheet = sheet).rules, l = rules.length;
			for(var j=0; j<l; j++) parseCSSRule(rules[j]);
		} catch(securityException){}
	}

	function parseCSSRule(rule) {
		var select = rule.selectorText, style = rule.style.cssText;
		if(!csshoverReg.test(select) || !style) return;

		var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');
		var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
		var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];
		var affected = select.replace(/:(hover|active).*$/, '');
		var elements = getElementsBySelect(affected);
		if(elements.length == 0) return;

		currentSheet.addRule(newSelect, style);
		for(var i=0; i<elements.length; i++)
			new HoverElement(elements[i], className, activators[pseudo]);
	}

function HoverElement(node, className, events) {
	if(!node.hovers) node.hovers = {};
	if(node.hovers[className]) return;
	node.hovers[className] = true;
	hookHoverEvent(node, events.on, function() { node.className += ' ' + className; });
	hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
}
	function hookHoverEvent(node, type, handler) {
		node.attachEvent(type, handler);
		hoverEvents[hoverEvents.length] = { 
			node:node, type:type, handler:handler 
		};
	}

	function unhookHoverEvents() {
		for(var e,i=0; i<hoverEvents.length; i++) {
			e = hoverEvents[i]; 
			e.node.detachEvent(e.type, e.handler);
		}
	}

function getElementsBySelect(rule) {
	var parts, nodes = [doc];
	parts = rule.split(' ');
	for(var i=0; i<parts.length; i++) {
		nodes = getSelectedNodes(parts[i], nodes);
	}	return nodes;
}
	function getSelectedNodes(select, elements) {
		var result, node, nodes = [];
		var identify = (/\#([a-z0-9_-]+)/i).exec(select);
		if(identify) {
			var element = doc.getElementById(identify[1]);
			return element? [element]:nodes;
		}
		
		var classname = (/\.([a-z0-9_-]+)/i).exec(select);
		var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');
		var classReg = classname? new RegExp('\\b' + classname[1] + '\\b'):false;
		for(var i=0; i<elements.length; i++) {
			result = tagName? elements[i].all.tags(tagName):elements[i].all; 
			for(var j=0; j<result.length; j++) {
				node = result[j];
				if(classReg && !classReg.test(node.className)) continue;
				nodes[nodes.length] = node;
			}
		}	
		
		return nodes;
	}
</script>

Yukarıda ki kodu "css.htc" olarak kaydedin...

Bu işlemden sonra Css Style dosyanızın body elementine şu kodu ekleyiniz..

Örnek:

<style type="text/css">
<!--
body {

	behavior:url("css.htc");
}
-->
</style>

Bu işlemi yaptıktan sonra, Html üzerinde her türlü taga link verebilirsiniz...

örneğin:

<style type="text/css">
#divlink {color:#000000}
#divlink:hover {color:#FFFFFF}
</style>

<a href="#"><div id=divlink>Link</div></a>

Bütün cevaplara teşekkür ederim,

Bende şöyle bir kod yazdım, uzun ve derin araştırmalarım sayesinde;

css'de

.left{
position:relative; 

display:block; 

no-repeat;
}
.left img{display:none; color:#000;}
.left:hover{color:#999;} /* IE icin */
.left:hover img{display:block; position:relative; top:-120px; left:-150px; border: none;}

html'de

<div class="left" id="text2">
&nbsp&nbsp
<a href="http://siteadresi.com" target="_blank">
Blablabla
<span>
&nbsp&nbsp&raquo;blablabla
</span>
</a>
<img src="http://siteadresi.com/ikonlar/b.png"/>
</div>

Fakat buradaki problem şudur, evet resimler istediğim yerde çıkıyor, fakat divin içindeki span'a gelincede çıkıyor böylece 2 farklı yerde raynı resim aynı zamanda çıkmıyor yazıya gelince çıkıyor sonra spana gelince tekrar yeni yerine geçiyor )

işte bunu çözemedim?