مرجع پارسی MyBB

نسخه‌ی کامل: افکت زیبای متنی
شما درحال مشاهده‌ی نسخه‌ی متنی این صفحه می‌باشید. مشاهده‌ی نسخه‌ی کامل با قالب‌بندی مناسب.

zohair

سلام به همگی
این هم یک کد که یک افکت زیبای متنی رو هنگام حرکت ماوس بر روی عکس دلخواه نشون میده ، این رو جاهای دیگه هم میتونید استفاده کنید .

نمونه :

[تصویر:  1295698438_99_a6ba2d6f86.png]
ابتدا کدهای زیر را در انتهای تمپلیت زیر قرار دهید :
قالب مورد نظر شما > header > بعد header

کد php:
<style type="text/css">

#dhtmltooltip{
positionabsolute;

border2px solid #3CA9F3;
padding2px;
font-size13px;
color#367937;
background-color#D6ECA6;
visibilityhidden;
z-index100;

    -
moz-border-radius-topleft5px;
    -
moz-border-radius-topright5px;
    -
moz-border-radius-bottomleft5px;
    -
moz-border-radius-bottomright5px;



/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filterprogid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}

</
style>


<
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=15 //Customize x offset of tooltip
var offsetypoint=15 //Customize y offset of tooltip
var ie=document.all
var ns6=document.getElementById && !document.all
var enabletip=false
if (ie||ns6)
var 
tipobj=document.alldocument.all["dhtmltooltip"] : document.getElementByIddocument.getElementById("dhtmltooltip") : ""

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

function 
ddrivetip(thetextthecolorthewidth){
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.operaietruebody().clientWidth-event.clientX-offsetxpoint window.innerWidth-e.clientX-offsetxpoint-20
var bottomedge=ie&&!window.operaietruebody().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=ieietruebody().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=ieietruebody().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="0px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
}
}

document.onmousemove=positiontip

</script

این کد رو به انتهای سطری که کد قرار گیری عکس در اون هست اضافه کنید :
کد:
onmouseover="ddrivetip('متن مورد نظر شما');" onmouseout="hideddrivetip();

مثلا برای قرار دادن یک عکس اینطوری عمل کنید :

کد:
<a href="آدرس مقصد" target="_blank"><img src="آدرس عکس"  onmouseover="ddrivetip('متن مورد نظر شما');" onmouseout="hideddrivetip();" alt=""></a>
البته این کار رو برای متن ها هم میتونید انجام بدین
موفق باشید
سلام یه سوال داشتم شما چجوری عنوان های کاربریتون با یک افکت زیبا نمایش داه میشه مثلا عنوان آقای Pars سبز رنگ و زیبا هست هر چه گشتم چیزی نبود راهنمایی کنید .