ΑΡΧΙΚΗ ΚΑΤΑΣΚΕΥΗ Bloggs ΚΩΔΙΚΑΣ html JavaScript ΕΙΣΑΓΩΓΗ ManiacΑΝΑΛΥΣΗ Site ΕΙΔΗΣΕΩΝ GadgetManiac ΓΕΝΙΚΑ

Κυριακή, 10 Φεβρουαρίου 2013

ΚΑΤΑΔΙΟΜΕΝΟ ΠΑΡΑΘΥΡΟ ΜΕ ΚΕΙΜΕΝΟ



           Τον κώδικα ενός παράθυρου που καταδύεται και που περιέχει το μήνυμα του κειμένου μας θα δείτε ποιο κάτω που το εγκαθιστώ  σε δυο στάδια.

     1. Στο πρώτο στάδιο επικολλώ τον παρακάτω κώδικα μέσα στο <HEAD> του HTML  κώδικα  του blog μου σαν gadget:

      Πάμε λοιπόν  Σχεδίαση> διάταξη>προσθήκη Gadget>HTML/JavaScript    και  επικολλώ τον κώδικα παρακάτω:

<HEAD>



<!-- This script and many more are available free online at -->

<!-- The JavaScript Source!! http://www.javascriptsource.com -->

<!-- Original:  DynamicDrive -->

<!-- Web Site:  http://www.dynamicdrive.com -->


    

<style type="text/css">

#dropinboxv2cover{
width: 320px; /*change width to desired */
height: 220px;  /*change height to desired. REMOVE if you wish box to be content's natural height */
position:absolute; /*Don't change below 4 rules*/
z-index: 100;
overflow:hidden;
visibility: hidden;
}

#dropinboxv2{
width: 300px; /*change width to above width-20. */
height: 200px; /*change height to above height-20. REMOVE if you wish box to be content's natural height*/
border: 2px solid black; /*Customize box appearance*/
background-color: lightyellow;
padding: 4px;
position:absolute; /*Don't change below 3 rules */

left: 0;
top: 0;
}

</style>

<script type="text/javascript">



/***********************************************

* Amazon style Drop-in content box- © Dynamic Drive DHTML code library (www.dynamicdrive.com)

* Visit DynamicDrive.com for hundreds of DHTML scripts

* This notice must stay intact for legal use

* Go to http://www.dynamicdrive.com/ for full source code

***********************************************/

var dropboxleft=200 //set left position of box (in px)
var dropboxtop=100 //set top position of box (in px)
var dropspeed=15 //set speed of drop animation (larger=faster)
//Specify display mode. 3 possible values are:
//1) "always"- This makes the fade-in box load each time the page is displayed
//2) "oncepersession"- This uses cookies to display the fade-in box only once per browser session
//3) integer (ie: 5)- Finally, you can specify an integer to display the box randomly via a frequency of 1/integer...
// For example, 2 would display the box about (1/2) 50% of the time the page loads.
var displaymode="always"
///Don't edit beyond here///////////
if (parseInt(displaymode)!=NaN)
var random_num=Math.floor(Math.random()*displaymode)
var ie=document.all
var dom=document.getElementById
function initboxv2(){
if (!dom&&!ie)
return
crossboxcover=(dom)?document.getElementById("dropinboxv2cover") : document.all.dropinboxv2cover
crossbox=(dom)?document.getElementById("dropinboxv2"): document.all.dropinboxv2
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
crossbox.height=crossbox.offsetHeight
crossboxcover.style.height=parseInt(crossbox.height)+"px"
crossbox.style.top=crossbox.height*(-1)+"px"
crossboxcover.style.left=dropboxleft+"px"
crossboxcover.style.top=dropboxtop+"px"
crossboxcover.style.visibility=(dom||ie)? "visible" : "show"
dropstart=setInterval("dropinv2()",50)
}
function dropinv2(){
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
if (parseInt(crossbox.style.top)<0){
crossboxcover.style.top=scroll_top+dropboxtop+"px"
crossbox.style.top=parseInt(crossbox.style.top)+dropspeed+"px"
}
else{
clearInterval(dropstart)
crossbox.style.top=0
}
}
function dismissboxv2(){
if (window.dropstart) clearInterval(dropstart)
crossboxcover.style.visibility="hidden"
}
function truebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = ""
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset)
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

if (displaymode=="oncepersession" && get_cookie("droppedinv2")=="" || displaymode=="always" || parseInt(displaymode)!=NaN && random_num==0){

if (window.addEventListener)

window.addEventListener("load", initboxv2, false)

else if (window.attachEvent)

window.attachEvent("onload", initboxv2)

else if (document.getElementById || document.all)

window.onload=initboxv2

if (displaymode=="oncepersession")

document.cookie="droppedinv2=yes"

}

</script>

</HEAD>



 2    Στο δευτερο βημα μου βρίσκω το  </BODY> με την βοηθια του ctrl+f,  και πριν  από αυτό επικολλώ τον ποιο κάτω κώδικα.



<!-- This script and many more are available free online at -->


<!-- Original:  DynamicDrive -->



<div id="dropinboxv2cover">
<div id="dropinboxv2">


Εδω μπορουμε να γραψουμε κειμενο !!!!!!!

Thanks DynamicDrive.


<br>
<p align="right"><a href="#" onClick="dismissboxv2();return false">Close It</a></p>
</div>
</div>


<!-- Script Size:  5.04 KB -->



Με κόκκινο:  εδώ γράφουμε  το κείμενό μας
Με μπλέ    :  ρυθμίζω το μέγεθος του παραθύρου  καθώς και την ταχύτητα.

 Να συμπληρώσουμε δω ότι μέσα στο χώρο με το κόκκινο, μπορούμε να τοποθετήσουμε όποια εικόνα θέλουμε εμείς, η οποία να ανοίγει και σε νέο παράθυρο, χρησιμοποιώντας τον ποιο κάτω κώδικα.
   
      <a target='_blank' href="URL ΠΑΡΑΠΟΜΠΗΣ"><img src="URL ΕΙΚΟΝΑΣ" height='110' width='130'/></a>
                        
                                   τέλος.


Δεν υπάρχουν σχόλια:

Δημοσίευση σχολίου

Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.