MouseOver Info Box

[Sundog]

In addition to some very nice Aurora Borealis photos, this website: http://www.nature-photography.pro/g2/ma ... temId=3283, has a couple of effects that I'd like to learn how to use. If you hover your mouse over the top right corner (of the photo), a graphic appears. If you click on the [ i ] icon, an information pane is displayed with photographic details.

When I View Code, it's difficult for me to find the code that does these effects, much less understand it. Any help (or a link to more help) would be appreciated.

(Edited to add hover location.)

[HansV]

The page uses a JavaScript library called PicLens Lite. This library appears to have been succeeded by another product, CoolIris, so I don't know whether it's still available.

[Jezza]

Hi Sundog

There is a lot going on in that code, the initial thing is that the slider images are controlled by CSS, the file is located in the root of the site at themes/slider_custom/local/theme.css

the CSS codes you are looking for are

Code: Select all

#photoThumbs {
	width: 70px;
	height: 50px;
	border-bottom: solid #555 1px;
	position: absolute;
	top: -3px;
	right: 8px;
}

#photoThumbsUp {
	width: 22px;
	height: 27px;
	background: transparent url(http://nature-photography.pro/g2/themes/slider_custom/images/thumbs_up.png) no-repeat;
	position: absolute;
	right: 11px;
	top: 4px;
	visibility: inherit;
	cursor: pointer;
}

#photoThumbsDown {
	width: 22px;
	height: 27px;
	background: transparent url(http://nature-photography.pro/g2/themes/slider_custom/images/thumbs_down.png) no-repeat;
	position: absolute;
	right: 35px;
	top: 4px;
	visibility: inherit;
	cursor: pointer;
}

#photoThumbsUpSelected {
	width: 22px;
	height: 27px;
	background: transparent url(http://nature-photography.pro/g2/themes/slider_custom/images/thumbs_up_selected.png) no-repeat;
	position: absolute;
	right: 26px;
	top: 4px;
	visibility: hidden;
}

#photoThumbsDownSelected {
	width: 22px;
	height: 27px;
	background: transparent url(http://nature-photography.pro/g2/themes/slider_custom/images/thumbs_down_selected.png) no-repeat;
	position: absolute;
	right: 26px;
	top: 4px;
	visibility: hidden;
}

#photoInfoButton {
	position: absolute;
	top: 69px;
	right: 31px;
	width: 27px;
	height: 27px;
	background: transparent url(http://nature-photography.pro/g2/themes/slider_custom/images/photoinfo.png) no-repeat;
	cursor: pointer;
}

The Javascript codes can be found in the linked files here:

Code: Select all

<script type="text/javascript" src="http://nature-photography.pro/g2/main.php?g2_view=core.CombinedJavascript&g2_key=ecb1ba8d4785495832db5fedb27d9794"></script>
<script type="text/javascript" src="main.php?g2_view=slideshow.DownloadPicLens&g2_file=js&g2_v=1.3.1.14221"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

There is a lot going on there but will be worth having a look at and see if there is anything you can glean from it

[Sundog]

Thanks, Hans and Jerry. I will play around with that stuff when time permits.