powiekszanie obrazkow po najechaniu myszką

[sh0tek]

Witam.

Szukam rozwiązania, mam do stworzenia coś takiego.

7 obrazków koło siebie, miniaturki, po najechaniu myszką pojawia się na obrazu box z nazwą i obrazek się powiększa, bez klikania w obrazek, klik to odnośnik do podstrony.

Ewentualnie same powiększanie bez tego boxa z nazwą który również się pojawi.

Najchętniej skorzystał bym z css, pytanie czy da się coś takiego zrobić ?

javy mogę użyć w ostateczności

ewentualnie jakieś inne koncepcje ? ktoś robił coś podobnego kiedyś ?

pozdro

[giker]

Nie javy tylko javascriptu - "Java ma się tak do javascriptu jak kot do kotwicy"

Nie wiem dokładnie co chcesz osiągnąć, ale poszukaj jQuery + plugin: albo fisheye menu (mac style menu) albo tooltip box.

[sh0tek]

java - javascript ;D korzystam z tego tak często że nawet nie wiem

na podobnej stronie https://derbi-bg.com/ jest coś flashowego

dzięki za podpowiedź z jquery to może zadziałać

-----

fisheye rozwiązuje mój problem

[giker]

https://www.ajaxdaddy.com/demo-interface-fisheye.html fisheye to chyba jednak to czego szukasz.

[ap_seo]

w cssie tez sie da chociaz bedzie troche kombinowania ale jak najbardziej sie da

[Hydrae920]

Java a JavaScript mają w stosunku do siebie jedno z nielicznych podobieństw którym jest właśnie nazwa, to dwa różne od siebie języki programowania Co do Twojego pytania, jeśli wolisz zrobić to w CSS to śmiało mogę Ci powiedzieć, że jest to do zrobienia.

[sh0tek]

ten 'temat' jest już rozwiązany opanowałem wszystko w css

[mitrok]

pokaż

[sh0tek]

/**  OTHERS	  **/


.clr {
clear:both;
}

/* thumbnail list */

ul#thumbs, ul#thumbs li{
	margin:0;
	padding:0;
	list-style:none;
}

ul#thumbs li{
	float:left;
	margin-right:5px;
	border:1px solid #999;	
	padding:1px;
}
ul#thumbs a{
	display:block;
	float:left;
	width:125px;
	height:145px;
	line-height:100px;
	overflow:hidden;
	position:relative;
	z-index:1;		
}
ul#thumbs a img{
	float:left;
	position:absolute;
	top:-20px;
	left:-50px;	
}

/* mouse over */

	ul#thumbs a:hover{
		overflow:visible;
		z-index:1000;
		border:none;		
	}
	ul#thumbs a:hover img{
		border:1px solid #999;	
		background:#fff;
		padding:1px;			
	}	

/* // mouse over */

/* clearing floats */

	ul#thumbs:after, li#thumbs:after{
		content:"."; 
		display:block; 
		height:0; 
		clear:both; 
		visibility:hidden;
		}
	ul#thumbs, li#thumbs{
		display:block;
		}
	/*  \*/
	ul#thumbs, li#thumbs{
		min-height:1%;
		}
	* html ul#thumbs, * html li#thumbs{
		height:1%;
		}	

/* // clearing floats */

/* // thumbnail list */


/* single thumbnail */

p.thumb{
	float:left;
	margin:.5em 0;
	margin-right:10px;
	border:1px solid #999;	
	padding:1px;
}
p.thumb a{
	display:block;
	float:left;
	width:120px;
	height:120px;
	line-height:100px;
	overflow:hidden;
	position:relative;
	z-index:1;	
}	
p.thumb a img{
	float:left;
	position:absolute;
	top:-20px;
	left:-50px;	
}

/* mouse over */

	p.thumb a:hover{
		overflow:visible;
		z-index:1000;
		border:none;		
	}
	p.thumb a:hover img{
		border:1px solid #999;	
		background:#fff;
		padding:2px;			
	}	

/* // mouse over */	

/* // single thumbnail */

obrazek jest wyświetlany

<ul id="thumbs">

<li><img src=...></li>

</ul>

Ten css jest za to odpowiedzialny, linka do strony w tej chwili nie moge dac bo czeka na poprawki