הוסטס - פורום אחסון האתרים הגדול בישראל

הוסטס - פורום אחסון האתרים הגדול בישראל (https://hosts.co.il/forums/index.php)
-   פורום תיכנות (https://hosts.co.il/forums/forumdisplay.php?f=14)
-   -   JS אפקט ה"טריילר" על תמונה (https://hosts.co.il/forums/showthread.php?t=59851)

phpyo 10-02-08 13:10

JS אפקט ה"טריילר" על תמונה
 
שלום.
אני מחפש נואשות דרך לעשות אפקט שכאשר מעבירים את העכבר על תמונה כלשהיא נגיד, אז ליד סמן העכבר התמונה תצוץ בחלון קטן בגדול יותר, ממש כמו באתר הזה : http://www.sxc.hu/
חיפשתי בגוגל, אך לא ממש מצאתי את התשובה.

אשמח לעזרה, תודה.

ASTeam 10-02-08 16:59

onmouseover ו- onmouseout

<a href="link.to.pic" onmouseover="showtrail(width,height,'the.pic.jpg') ;" onmouseout="hidetrail();"></a>

daMn 10-02-08 20:44

אלו הפונקציות שאתה צריך להשתמש בהם, שחק איתם קצת, ההזמנה לפונקציה מתבצעת כמו שזה שמעלי אמר.
PHP קוד:

var w=1
var h=1

if (document.getElementById || document.all)
document.write('<div id="trailimageid" style="position:absolute;visibility:hidden;left:0px;top:-1000px;width:1px;height:1px;border:1px solid #888888;background:#DDDDDD;"><img id="ttimg" src="img/s.gif" /></div>')

function 
gettrailobj()
{
    if (
document.getElementById) return document.getElementById("trailimageid").style
    
else if (document.all) return document.all.trailimagid.style
}

function 
truebody()
{
    return (!
window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement document.body
}

function 
hidetrail()
{
    
document.onmousemove=""
    
document.getElementById('ttimg').src='/img/s.gif'
    
gettrailobj().visibility="hidden"
    
gettrailobj().left=-1000
    gettrailobj
().top=0
}


function 
showtrail(width,height,file)
{
    if(
navigator.userAgent.toLowerCase().indexOf('opera') == -1)
    {
        
w=width
        h
=height
        
        
// followmouse()
    
        
document.getElementById('ttimg').src=file
        document
.onmousemove=followmouse
        gettrailobj
().visibility="visible"
        
gettrailobj().width=w+"px"
        
gettrailobj().height=h+"px"


    
}
}


function 
followmouse(e)
{

    if(
navigator.userAgent.toLowerCase().indexOf('opera') == -1)
    {

        var 
xcoord=20
        
var ycoord=20

        
if (typeof e != "undefined")
        {
            
xcoord+=e.pageX
            ycoord
+=e.pageY
        
}
        else if (
typeof window.event !="undefined")
        {
            
xcoord+=truebody().scrollLeft+event.clientX
            ycoord
+=truebody().scrollTop+event.clientY
        
}

        var 
docwidth=document.alltruebody().scrollLeft+truebody().clientWidth pageXOffset+window.innerWidth-15
        
var docheight=document.allMath.max(truebody().scrollHeighttruebody().clientHeight) : Math.max(document.body.offsetHeightwindow.innerHeight)

        if (
xcoord+w+3>docwidth)
        
xcoord=xcoord-w-(20*2)

        if (
ycoord-truebody().scrollTop+h>truebody().clientHeight)
        
ycoord=ycoord-h-20;

        
gettrailobj().left=xcoord+"px"
        
gettrailobj().top=ycoord+"px"

    
}



אגב: http://www.javascriptkit.com/script/...agetrail.shtml

ASTeam 12-02-08 14:37

**טעות שלי..לא הבאתי את קובץ הJS...
הביאו כבר אז תודה!..


כל הזמנים הם GMT +2. הזמן כעת הוא 12:11.

מופעל באמצעות VBulletin גרסה 3.8.6
כל הזכויות שמורות ©
כל הזכויות שמורות לסולל יבוא ורשתות (1997) בע"מ