[b]this is the part 2 of intro to css based foto gallery here's the part 1:[/b] [url=http://theftalk.com/viewtopic.php?id=50769]click click[/url] [b] im planning to continue it until 3 or 4... tuts now here's how it look like...[/b] [u]in screen shot:[/u] [b] mouse out:[/b] [img]http://i42.tinypic.com/2mhifth.jpg[/img] [b]mouse over:[/b] [img]http://i41.tinypic.com/k9vuqo.jpg[/img] [i]for live: view here ->[/i] [url=http://profiles.friendster.com/31744801][/url] [b]here's the codas.... requirements: css extension file js extension file for css extension [/b] [spoiler][quote]/*Css based enlarge mouse over version*/ .a, .a:visited {color:#000;} #container {position:relative; width:500px; height:450px; background:#888; border:1px solid #000; margin:6px auto;} #container b {font-weight:normal; width:500px; text-align:center; position:absolute; bottom:250px; left:10px; color:#eee; font-family:tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif; letter-spacing:1px; line-height:1.7em; z-index:1;} a.gallery, a.gallery:visited {display:inline; color:#000; text-decoration:none; border:1px solid #000; width:75px; height:80px; float:left; margin:7px 21px; position:relative; cursor:default;} a.slidea {background:url([u]PIC IN MOUSE OUT 1[/u]);} a.slideb {background:url([u]PIC IN MOUSE OUT 2[/u]);} a.slidec {background:url([u]PIC IN MOUSE OUT 3[/u]);} a.slided {background:url([u]PIC IN MOUSE OUT 4[/u]);} a.slidee {background:url([u]PIC IN MOUSE OUT 5[/u]);} a.slidef {background:url([u]PIC IN MOUSE OUT 6[/u]);} a.slideg {background:url([u]PIC IN MOUSE OUT 7[/u]);} a.slideh {background:url([u]PIC IN MOUSE OUT 8[/u]);} a.slidei {background:url([u]PIC IN MOUSE OUT 9[/u]);} a.slidej {background:url([u]PIC IN MOUSE OUT 10[/u]);} a.slidek {background:url([u]PIC IN MOUSE OUT 11[/u]);} a.slidel {background:url([u]PIC IN MOUSE OUT 12[/u]);} a.gallery span {visibility:hidden; display:block; position:absolute; width:400px; height:350px; top:189px; left:9px; color:#000; background:#ccc; text-align:center; border:1px solid #fff; font-family:tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif; letter-spacing:1px; cursor:default;} a.slidea span {left:-13px; top:10px;} a.slideb span {left:-132px; top:10px;} a.slidec span {left:-251px; top:10px;} a.slided span {left:-370px; top:10px;} a.slidee span {left:-5px; top:5px;} a.slidef span {left:-13px; top:5px;} a.slideg span {left:-200px; top:5px;} a.slideh span {left:-300px; top:5px;} a.slidei span {left:-5px; top:1px;} a.slidej span {left:-50px; top:1px;} a.slidek span {left:-200px; top:1px;} a.slidel span {left:-1px; top:1px;} a.gallery:hover {white-space:normal; border:1px solid #fff; z-index:100;} a.gallery:hover span {visibility:visible; z-index:100;} a.gallery:hover span img {margin:10px; border:1px solid #000; position:relative; z-index:100;} a.gallery:active, a.gallery:focus {border:1px solid #c00; z-index:10;} a.gallery:active span, a.gallery:focus span {visibility:visible; z-index:10;} a.gallery:active span img, a.gallery:focus span img {border:1px solid #000; position:relative; margin:10px; z-index:10;}[/quote] [/spoiler] [b] for js extension [/b] [spoiler][quote]//Css based enlarge hover style by Xiruki //Credits to: Stu Nicholl scripts var foto ="<center><div id='container'><a class='gallery slidea' href='#nogo'><span><img src='[b]PIC MOUSE OVER URL 1[/b]' alt='pic1' title='warm to cold' width='370' height='270'/><br />[b]caption1[/b]</span></a><a class='gallery slideb' href='#nogo'><span><img src='[b]PIC MOUSE OVER URL 2[/b]' alt='Warm to Cold' title='Warm to Cold' width='370' height='270'/><br />[b]caption2[/b]</span></a><a class='gallery slidec' href='#nogo'><span><img src='[b]PIC MOUSE OVER URL 3[/b]' alt='Warm to Cold' title='Warm to Cold' width='370' height='270'/><br />[b]caption3[/b]</span></a><a class='gallery slided' href='#nogo'><span><img src='[b]PIC MOUSE OVER URL 4[/b]' alt='Warm to Cold' title='Warm to Cold' width='370' height='270'/><br />[b]caption4[/b]</span></a><a class='gallery slidee' href='#nogo'><span><img src='[b]PIC MOUSE OVER URL 5[/b]' alt='Warm to Cold' title='Warm to Cold' width='370' height='270'/><br />[b]caption5[/b]</span></a><a class='gallery slidef' href='#nogo'><span><img src='[b]PIC MOUSE OVER URL 6[/b]' alt='Warm to Cold' title='Warm to Cold' width='370' height='270'/><br />[b]caption6[/b]</span></a><a class='gallery slideg' href='#nogo'><span><img src='[b]PIC MOUSE OVER URL 7[/b]' alt='Warm to Cold' title='Warm to Cold' width='370' height='270'/><br />[b]caption7[/b]</span></a><a class='gallery slideh' href='#nogo'><span><img src='[b]PIC MOUSE OVER URL 8[/b]' alt='Warm to Cold' title='Warm to Cold' width='370' height='270'/><br />[b]caption8[/b]</span></a><a class='gallery slidei' href='#nogo'><span><img src='[b]PIC MOUSE OVER URL 9[/b]' alt='Warm to Cold' title='Warm to Cold' width='370' height='270'/><br />[b]caption9[/b]</span></a><a class='gallery slidej' href='#nogo'><span><img src='[b]PIC MOUSE OVER URL 10[/b]' alt='Warm to Cold' title='Warm to Cold' width='370' height='270'/><br />[b]caption10[/b]</span></a><a class='gallery slidel' href='#nogo'><span><img src='[b]PIC MOUSE OVER URL 11[/b]' alt='Warm to Cold' title='Warm to Cold' width='370' height='270'/><br />[b]caption11[/b]</span></a><a class='gallery slidek' href='#nogo'><span><img src='[b]PIC MOUSE OVER URL 12[/b]' alt='Warm to Cold' title='Warm to Cold' width='370' height='270'/><br />[b]caption12[/b]</span></a><br><img src='http://i392.photobucket.com/albums/pp8/purplebubblegum/camera_line_drawing1.jpg'><br />credits:<br /><a href='http://www.xiruki.doodlekit.com/'>Original author: Simon Pole<br>Posted by: Xiruki</a></div><br><a href='http://www.friendster.com/viewalbums.php?uid=5698348'><img src='http://th183.photobucket.com/albums/x98/austinrowles/th_ViewPicturesbutton-1.jpg'></a></center>"; document.getElementById('content_1').style.height='100%'; document.getElementById('content_1').style.overflowY='hidden'; document.getElementById('content_1').innerHTML =foto;[/quote] [/spoiler] edit the ff: for css ext: [u]underlined[/u]- put ur mouse out image url. must have been avatar size... --------------------> perfect size is this one [i]sample:[/i] [img]http://th42.photobucket.com/albums/e311/Gouzaburou/th_Haruhi.jpg[/img] [b]width: 100 height: 100[/b] but it depends on you. for js ext: [b]bolded[/b]- put ur own mouse over image url. any size... Also, change the captions per photo.. [i] after editing.... paste the css codes inside the css extension file. and put ur js codes inside ur js extension file. Save it. [/i] [b]credits to: stu nicholl xiruki [/b] [quote][b]watch out for next versions [/b][/quote]