बनाना विकर्ण लिंक (href) क्षेत्रों

Question

आप 50px div/बॉक्स

<div style="width: 50px; height: 50px;"> 
</div> 

इस बॉक्स आपको दो लिंक कि यह इतना

तरह तिरछे द्विभाजित करना चाहते हैं में से एक 50px है कहो

आप पुराने मानचित्र/क्षेत्र HTML का उपयोग कर सकते हैं लेकिन यह अवांछनीय है क्योंकि jquery इसके साथ बहुत अच्छी तरह से नहीं खेलता है ... लेकिन यह एक और कहानी है।

मैं विचारों से कम हूं और वास्तव में इस स्थिति से कैसे संपर्क करेंगे इस बारे में सहायता/अंतर्दृष्टि की सराहना करता हूं।

Answer 1

यह jQuery के साथ बहुत आसान है, खासकर जब से यह एक सरल y = एक्स विभाजन है:

$("#clickMe").click(function(event){ 
    console.log(event); 
    if(event.offsetX>event.offsetY){ 
     parent.window.location="http://bing.com"; 
    }else{ 
     parent.window.location = "http://google.com"; 
    } 
}); 

हम क्या कर रहे हैं div ay = एक्स कार्य के आधार पर इस क्षेत्र में (किसी भी समारोह पता लगा रहा है हालांकि काम करेगा)। वैसे, मैं केवल jsfiddle के लिए माता-पिता का उपयोग कर रहा हूं क्योंकि कोड आईफ्रेम में चलता है।

http://jsfiddle.net/JM6JC/4/

[अद्यतन]

ठीक है, आप कैसे एक लाइन के विपरीत दिशा में जा रहा करने के लिए के बारे में पूछा। मुझे लगता है कि यह थोड़ा सा सामान्य बनाना बेहतर होगा। प्रश्न कुछ असमानता के अलावा कुछ भी नहीं है, जिसे आपको ग्रेड स्कूल गणित से याद रखना चाहिए [अधिक या कम :)]। यदि नहीं, तो यहां एक वीडियो है: http://www.khanacademy.org/video/graphing-inequalities?playlist=ck12.org+Algebra+1+Examples

मैंने एक अद्यतन प्रदर्शन किया है जिसमें "isAboveFunction" फ़ंक्शन है। यह मृत सरल है: यह एक्स, वाई निर्देशांक में गुजरता है, एक्स पर एक कार्य (बीजगणितीय अर्थ में) करता है, और यह आंकड़ा बताता है कि परिणाम वाई से बड़ा है। सभी क्षेत्रों में यह अधिक है, हम उस क्षेत्र को छाया कर सकते हैं और कुछ अलग तर्क लागू करें।

यह भी याद रखें कि कंप्यूटर निर्देशांक में, एक्स और वाई आपकी स्क्रीन के ऊपरी बाईं ओर से शुरू होते हैं। एक्स (कभी-कभी "बाएं" कहा जाता है) आपकी स्क्रीन के बाईं तरफ से कितना दूर है (या इस मामले में बॉक्स के बाईं तरफ से कितना दूर है। इसी प्रकार, वाई (या "टॉप") शीर्ष से कितना दूर है।

इन दोनों अवधारणाओं एक साथ रखें और आप किसी भी समारोह आप चाहते हैं मैं कुछ उदाहरण शामिल किए हैं, लेकिन यह के साथ चारों ओर खेलने के लिए स्वतंत्र महसूस कर सकते हैं:।

function isAboveFunction(x,y){ 
    var line; 
    //CHANGE ME 
    //line=x*x*.025; 
    //line= 2*x; 
    //line = -1*x+50; 
    line= 200/x; 

    if(y>line){ 
     return true; 
    }else{ 
     return false; 
    } 
} 

http://jsfiddle.net/JM6JC/33/

Answer 2

मुझे यकीन है कि कैसे नहीं कर रहा हूँ लचीला आपको यह होना चाहिए, लेकिन आप यहां एक समाधान देख सकते हैं: http://jsfiddle.net/nrabinowitz/KsCR9/

यह सीएसएस का उपयोग करता है त्रिकोण रेंडर करने के लिए:

#triangles { 
    border-color: darkblue darkblue steelblue steelblue; 
    border-style:solid; 
    border-width:20px; 
    width:0; 
    height:0; 
    display: block; 
    cursor: pointer; 
} 

और jQuery लिंक को संभालने के लिए:

$('#triangles').click(function(e) { 
    if (e.offsetX > e.offsetY) { 
     console.log("Go to dark blue link!"); 
    } else { 
     console.log("Go to light blue link!"); 
    } 
});