Printable View
Hello there, can some1 help me, i am looking this what is on this web:
http://salonplus.ee/index.php/page_id/41
There is slide content where are pictures and if mouse over then comes info anf if you move mouse over left or righ side arrow then pictres are moving :) Hope you all understand me :)
And thank you very much if any1 can help me :)
Best Regards,
FroG
Will one of the following work?
http://dynamicdrive.com/dynamicindex...iongallery.htm
http://www.dynamicdrive.com/dynamici...epcarousel.htm
If you are referring to the tooltip, that can be done in a few ways. Check out these tutorials to learn how to do it with jQuery:
http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-day-11/ and Demo
http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-day-12/ and Demo
You can also take a look at these simpler ones on DD:
http://www.dynamicdrive.com/dynamicindex5/dhtmltooltip.htm
http://www.dynamicdrive.com/dynamicindex5/dhtmltooltip2.htm
Good luck!
I believe he was talking about when you hover over the arrows under "Selle tootega sobivad"
hi. I mean the whole thing what there is...under"Selle tootega sobivad" the whole script.Quote:
Originally Posted by Nile
similar like this:http://dynamicdrive.com/dynamicindex...iongallery.htm
but i want if i slide mouse over then it shown info like this are Under "Selle tootega sobivad"
http://salonplus.ee/index.php/page_id/41
Well - my script should cover the scrolling. And Snookerman's should cover the tooltip.
But like this whole script dont exist?Quote:
Originally Posted by Nile
Not that I know of... If you need help combining them just ask though. :)
it would be very useful if you can make tutorial to combining them or just help me :)Quote:
Originally Posted by Nile
Here you go:
I just followed the instructions for these two scripts:HTML Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="generator" content="HTML Tidy, see www.w3.org">
<meta http-equiv="Content-Type" content= "text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href= "http://dynamicdrive.com/dynamicindex4/gallerystyle.css">
<!-- Do not edit IE conditional style below -->
<!--[if gte IE 5.5]>
<style type="text/css">
#motioncontainer {
width:expression(Math.min(this.offsetWidth, maxwidth)+'px');
}
</style>
<![endif]--><!-- End Conditional Style -->
<script type="text/javascript" src= "http://dynamicdrive.com/dynamicindex4/motiongallery.js">
/***********************************************
* CMotion Image Gallery- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
* Modified by Jscheuer1 for autowidth and optional starting positions
***********************************************/
</script>
<style type="text/css">
#dhtmltooltip {
position: absolute;
width: 150px;
border: 2px solid black;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;
}
</style>
</head>
<body>
<div id="motioncontainer" style="position:relative;overflow:hidden;">
<div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">
<nobr id="trueContainer">
<a href= "javascript:enlargeimage('http://dynamicdrive.com/dynamicindex4/dynamicbook1.gif')"><img onMouseover="ddrivetip('JavaScriptKit.com JavaScript tutorials','yellow', 300)" onMouseout="hideddrivetip()" alt="" src= "http://dynamicdrive.com/dynamicindex4/dynamicbook1.gif" border="1"></a><a href= "javascript:enlargeimage('http://dynamicdrive.com/dynamicindex4/dynamicbook1.gif', 300, 300)"><img onMouseover="ddrivetip('JavaScriptKit.com JavaScript tutorials','yellow', 300)" onMouseout="hideddrivetip()" alt="" src= "http://dynamicdrive.com/dynamicindex4/dynamicbook1.gif" border="1"></a><a href= "http://www.dynamicdrive.com"><img onMouseover="ddrivetip('JavaScriptKit.com JavaScript tutorials','yellow', 300)" onMouseout="hideddrivetip()" alt="" src= "http://dynamicdrive.com/dynamicindex4/dynamicbook1.gif" border="1"></a><a href="#"><img onMouseover="ddrivetip('JavaScriptKit.com JavaScript tutorials','yellow', 300)" onMouseout="hideddrivetip()" alt="" src= "http://dynamicdrive.com/dynamicindex4/dynamicbook1.gif" border="1"></a><a href="#"><img onMouseover="ddrivetip('JavaScriptKit.com JavaScript tutorials','yellow', 300)" onMouseout="hideddrivetip()" alt="" src= "http://dynamicdrive.com/dynamicindex4/dynamicbook1.gif" border="1"></a><a href="#"><img onMouseover="ddrivetip('JavaScriptKit.com JavaScript tutorials','yellow', 300)" onMouseout="hideddrivetip()" alt="" src= "http://dynamicdrive.com/dynamicindex4/dynamicbook1.gif" border="1"></a><a href="#"><img onMouseover="ddrivetip('JavaScriptKit.com JavaScript tutorials','yellow', 300)" onMouseout="hideddrivetip()" alt="" src= "http://dynamicdrive.com/dynamicindex4/dynamicbook1.gif" border="1"></a><a href="#"><img onMouseover="ddrivetip('JavaScriptKit.com JavaScript tutorials','yellow', 300)" onMouseout="hideddrivetip()" alt="" src= "http://dynamicdrive.com/dynamicindex4/dynamicbook1.gif" border="1"></a><a href="#"><img onMouseover="ddrivetip('JavaScriptKit.com JavaScript tutorials','yellow', 300)" onMouseout="hideddrivetip()" alt="" src= "http://dynamicdrive.com/dynamicindex4/dynamicbook1.gif" border="1"></a>
</nobr>
</div>
</div>
<div id="dhtmltooltip">
</div>
<script type="text/javascript">
/***********************************************
* Cool DHTML tooltip script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
var offsetxpoint = -60 //Customize x offset of tooltip
var offsetypoint = 20 //Customize y offset of tooltip
var ie = document.all
var ns6 = document.getElementById && !document.all
var enabletip = false
if (ie || ns6)
var tipobj = document.all ? document.all["dhtmltooltip"] : document.getElementById ? document.getElementById("dhtmltooltip") : ""
function ietruebody(){
return (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body
}
function ddrivetip(thetext, thecolor, thewidth){
if (ns6 || ie) {
if (typeof thewidth != "undefined")
tipobj.style.width = thewidth + "px"
if (typeof thecolor != "undefined" && thecolor != "")
tipobj.style.backgroundColor = thecolor
tipobj.innerHTML = thetext
enabletip = true
return false
}
}
function positiontip(e){
if (enabletip) {
var curX = (ns6) ? e.pageX : event.clientX + ietruebody().scrollLeft;
var curY = (ns6) ? e.pageY : event.clientY + ietruebody().scrollTop;
//Find out how close the mouse is to the corner of the window
var rightedge = ie && !window.opera ? ietruebody().clientWidth - event.clientX - offsetxpoint : window.innerWidth - e.clientX - offsetxpoint - 20
var bottomedge = ie && !window.opera ? ietruebody().clientHeight - event.clientY - offsetypoint : window.innerHeight - e.clientY - offsetypoint - 20
var leftedge = (offsetxpoint < 0) ? offsetxpoint * (-1) : -1000
//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge < tipobj.offsetWidth)
//move the horizontal position of the menu to the left by it's width
tipobj.style.left = ie ? ietruebody().scrollLeft + event.clientX - tipobj.offsetWidth + "px" : window.pageXOffset + e.clientX - tipobj.offsetWidth + "px"
else
if (curX < leftedge)
tipobj.style.left = "5px"
else
//position the horizontal position of the menu where the mouse is positioned
tipobj.style.left = curX + offsetxpoint + "px"
//same concept with the vertical position
if (bottomedge < tipobj.offsetHeight)
tipobj.style.top = ie ? ietruebody().scrollTop + event.clientY - tipobj.offsetHeight - offsetypoint + "px" : window.pageYOffset + e.clientY - tipobj.offsetHeight - offsetypoint + "px"
else
tipobj.style.top = curY + offsetypoint + "px"
tipobj.style.visibility = "visible"
}
}
function hideddrivetip(){
if (ns6 || ie) {
enabletip = false
tipobj.style.visibility = "hidden"
tipobj.style.left = "-1000px"
tipobj.style.backgroundColor = ''
tipobj.style.width = ''
}
}
document.onmousemove = positiontip
</script>
</body>
</html>
http://www.dynamicdrive.com/dynamicindex5/dhtmltooltip.htm
http://dynamicdrive.com/dynamicindex4/cmotiongallery.htm
Good luck and if there's anything just ask.