Скрыть сайт
Показать сайт

При наведение на сылку смена информации в блоке

Красный квадрат

Желтый квадрат

Зеленый квадрат

Черный квадрат

Синий квадрат

Что бы так работало нужен вот такой код, незабывает указать правиьный путь к библиотеке jquery - jquery.1.6.1.js:
<style>
body{width:945px; margin:auto; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666666;}
a.mlink{display:block;padding:10px;text-decoration:none;}
a.mlink:hover{color:green;}
.oblasty_smeni{border:1px solid #8E9600;height:270px;padding:10px;}
.oblasty_smeni div {display:none;}
</style>
<script type="text/javascript" language="javascript" src="jquery.1.6.1.js"></script>
<!-- -->
<script language="javascript">
<!-- selected_box_default это имя в data-id, какой блок по умолчанию показываем -->
<!-- data-id это произвольный атрибудь, его можно любым назначить ->>
<!-- #green.prosto_levii_blog_luboe_ima a  это адрес где будт слушать блоки-->
$(document).ready(function() {
	$('#selected_box_default').show();
	$('.oblasty_smeni').css({'border':'1px solid #8E9600','height':'270px'})
	$('.prosto_levii_blog_luboe_ima a').mouseenter(function() {
		$('.oblasty_smeni div').hide();
		$('.oblasty_smeni').css({'border':'1px solid #8E9600','height':'270px'})
		$('#' + $(this).attr("data-id") ).show(); 
	});
	
});

</script>

<table cellpadding="0" cellspacing="0" border="0" width="100%" style="padding-top:50px;">
	<tr><td width="200" valign="top">
			<div id="green" class="prosto_levii_blog_luboe_ima">
                <p style="margin-left:9px;" class="black">Цвета квадратов</p>
                    <a href="#" data-id="selected_box_default" 	class="mlink" style="color:#FF0000;">Красный квадрат</a>
                    <a href="#" data-id="box1" 					class="mlink" style="color:#D5D589;">Желтый квадрат</a>
                    <a href="#" data-id="box2" 					class="mlink" style="color:#20BD23;">Зеленый квадрат</a>
                    <a href="#" data-id="box3" 					class="mlink" style="color:#000000;">Черный квадрат</a>                    
                    <a href="#" data-id="box4"  				class="mlink" style="color:#0000FF;">Синий квадрат</a>
            </div>
		</td>
		<td valign="top">		    
                	<div class="oblasty_smeni">
                		<div id="selected_box_default">
                		<h2>Красный квадрат</h2>
						<p style="margin:0 0 0 50px;width:100px;height:100px;background-color:red;"></p>                        
                        </div>
                        <div id="box1">
                		<h2>Желтый квадрат</h2>
						<p style="margin:0 0 0 50px;width:100px;height:100px;background-color:#D5D589;"></p>
                		</div>
                      <div id="box2">
                		<h2>Зеленый квадрат</h2>
						<p style="margin:0 0 0 50px;width:100px;height:100px;background-color:#20BD23;"></p>                    
                        </div>
                        <div id="box3">
                		<h2>Черный квадрат</h2>
						<p style="margin:0 0 0 50px;width:100px;height:100px;background-color:#000000;"></p>                    
                        </div>                        
                        <div id="box4" >
                		<h2>Синий квадрат</h2>
						<p style="margin:0 0 0 50px;width:100px;height:100px;background-color:#0000FF;"></p>                    
                        </div>
                	</div>
                
		</td>
	</tr>
</table>
				

* в самом коде надо правильно указать путь к файлу библиотеки jquery.1.6.1.js, если просто скопировать работь не будет, нужно править путь до этой библиотеки. Скачать можно где угодно. Или посмотреть исходный код этой страницы.
 
455
454
1
Пишем культурно и не нарушая законы РФ.
 

2016 год.