قرار دادن تصاویر گرافکی موجب زیبایی طراحی سایت ما می شود. انجام ایفکت ها و عکس های با کیفیت بالا موجب جذابیت هرچه ببیشتر طراحی وب سایت ما می شود. ممکن است شما این ایده را بر ذهن داشته باشید که تصایر با قرار گیری موس بر روی آنها در حالت محوتری به نمایش گذاشته شوند در این صورت مسئله طراحی سایت و محو نمون تصاویر مطرح می شود که علاوه بر جذابیت صفحه وب سایت بر توجه خاص کاربر بر می افزاید که در سئو سایت تاثیر گذار می باشد. در اینجا به شرح تکنیک طراحی سایت و محو نمودش تصاویر به واسط اسکریپ های جاوا می پردازیم . کد درج شده در زیر بیانگر این موضوع می باشد.
<script><link rel="stylesheet" type="text/css" href="/demo/checkboxtoggler.css" />
<script type="text/j-avascript" src="/demo/StackBoxBlur.js"></script>
<script type="text/j-avascript" src="/demo/StackBoxBlurWrapper.js"></script>
<script>
window.on-load = function(){ // when window loads
var hayden1 = new stackBoxBlurIt('hayden1') // reference original image to blur
var checkbox1 = document.getElementById('checkbox1') // reference checkbox to toggle image blur
if (checkbox1.checked == false){ // if checkbox isn't checked when page is loaded
hayden1.blurit(40) // blur it
}
checkbox1.on-change = function(){ // whenever checkbox state changes
hayden1.blurit( this.checked? 0 : 40 ) // blur or not to blur
}
}
</script>
<body>
<img id="hayden1" border="0" src="/demo/hayden.jpg" width="280" height="350">
<div class="toggler">
<input type="checkbox" id="checkbox1" />
<label for="checkbox1"></label>
</div>
</body>
که در کد بالا می توانید آدرس تصویر مورد نظر خود را بگذارید و.به آسانی طراحی سایت و محو نمودن تصاویر را در صفحه سایت خود درج نمایید.
- ۹۳/۱۱/۱۸