« Testpage » : différence entre les versions
Aucun résumé des modifications |
Aucun résumé des modifications |
||
Ligne 11 : | Ligne 11 : | ||
Avec curiosité et appréhension, Valdrien commença à explorer ses nouveaux pouvoirs. Il apprit à contrôler les éléments, à lire les pensées des animaux et même à guérir les blessures. | Avec curiosité et appréhension, Valdrien commença à explorer ses nouveaux pouvoirs. Il apprit à contrôler les éléments, à lire les pensées des animaux et même à guérir les blessures. | ||
</div><br> | </div><br> | ||
<style> | |||
* {box-sizing: border-box;} | |||
.img-magnifier-container { | |||
position:relative; | |||
} | |||
.img-magnifier-glass { | |||
position: absolute; | |||
border: 3px solid #000; | |||
border-radius: 50%; | |||
cursor: none; | |||
/*Set the size of the magnifier glass:*/ | |||
width: 200px; | |||
height: 200px; | |||
} | |||
</style> | |||
<script> | |||
function magnify(imgID, zoom) { | |||
var img, glass, w, h, bw; | |||
img = document.getElementById(imgID); | |||
/*create magnifier glass:*/ | |||
glass = document.createElement("DIV"); | |||
glass.setAttribute("class", "img-magnifier-glass"); | |||
/*insert magnifier glass:*/ | |||
img.parentElement.insertBefore(glass, img); | |||
/*set background properties for the magnifier glass:*/ | |||
glass.style.backgroundImage = "url('" + img.src + "')"; | |||
glass.style.backgroundRepeat = "no-repeat"; | |||
glass.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px"; | |||
bw = 3; | |||
w = glass.offsetWidth / 2; | |||
h = glass.offsetHeight / 2; | |||
/*execute a function when someone moves the magnifier glass over the image:*/ | |||
glass.addEventListener("mousemove", moveMagnifier); | |||
img.addEventListener("mousemove", moveMagnifier); | |||
/*and also for touch screens:*/ | |||
glass.addEventListener("touchmove", moveMagnifier); | |||
img.addEventListener("touchmove", moveMagnifier); | |||
function moveMagnifier(e) { | |||
var pos, x, y; | |||
/*prevent any other actions that may occur when moving over the image*/ | |||
e.preventDefault(); | |||
/*get the cursor's x and y positions:*/ | |||
pos = getCursorPos(e); | |||
x = pos.x; | |||
y = pos.y; | |||
/*prevent the magnifier glass from being positioned outside the image:*/ | |||
if (x > img.width - (w / zoom)) {x = img.width - (w / zoom);} | |||
if (x < w / zoom) {x = w / zoom;} | |||
if (y > img.height - (h / zoom)) {y = img.height - (h / zoom);} | |||
if (y < h / zoom) {y = h / zoom;} | |||
/*set the position of the magnifier glass:*/ | |||
glass.style.left = (x - w) + "px"; | |||
glass.style.top = (y - h) + "px"; | |||
/*display what the magnifier glass "sees":*/ | |||
glass.style.backgroundPosition = "-" + ((x * zoom) - w + bw) + "px -" + ((y * zoom) - h + bw) + "px"; | |||
} | |||
function getCursorPos(e) { | |||
var a, x = 0, y = 0; | |||
e = e || window.event; | |||
/*get the x and y positions of the image:*/ | |||
a = img.getBoundingClientRect(); | |||
/*calculate the cursor's x and y coordinates, relative to the image:*/ | |||
x = e.pageX - a.left; | |||
y = e.pageY - a.top; | |||
/*consider any page scrolling:*/ | |||
x = x - window.pageXOffset; | |||
y = y - window.pageYOffset; | |||
return {x : x, y : y}; | |||
} | |||
} | |||
</script> | |||
<div class="img-magnifier-container"> | |||
<img id="myimage" src="Grand_Continent.jpg" width="800" height="600"> | |||
</div> | |||
<script> | |||
/* Initiate Magnify Function | |||
with the id of the image, and the strength of the magnifier glass:*/ | |||
magnify("myimage", 3); | |||
</script> |
Version du 6 mai 2024 à 20:31
Partie 1
Ceci est une page de test pour tester la gestion des templates comme cela se fait dans d'autres wiki avancés.
L'histoire suivante n'a aucun sens et a simplement été généré par ChatGPT.
Dans un petit village paisible, Valdrien était connu comme un jeune homme ordinaire aux cheveux roux flamboyants. Il passait ses journées à vaquer aux tâches quotidiennes, sans se douter de la magie qui couvait en lui.
Un jour, alors qu'il ramassait du bois dans la forêt avoisinante, Valdrien trébucha sur une racine et tomba. Dans sa chute, il prononça des mots étranges et soudain, une étincelle verte jaillit de ses mains. Stupéfait, il réalisa qu'il venait de faire de la magie !
Avec curiosité et appréhension, Valdrien commença à explorer ses nouveaux pouvoirs. Il apprit à contrôler les éléments, à lire les pensées des animaux et même à guérir les blessures.
<style>
- {box-sizing: border-box;}
.img-magnifier-container {
position:relative;
}
.img-magnifier-glass {
position: absolute; border: 3px solid #000; border-radius: 50%; cursor: none; /*Set the size of the magnifier glass:*/ width: 200px; height: 200px;
} </style>
<script> function magnify(imgID, zoom) {
var img, glass, w, h, bw; img = document.getElementById(imgID); /*create magnifier glass:*/ glass = document.createElement("DIV"); glass.setAttribute("class", "img-magnifier-glass"); /*insert magnifier glass:*/ img.parentElement.insertBefore(glass, img); /*set background properties for the magnifier glass:*/ glass.style.backgroundImage = "url('" + img.src + "')"; glass.style.backgroundRepeat = "no-repeat"; glass.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px"; bw = 3; w = glass.offsetWidth / 2; h = glass.offsetHeight / 2; /*execute a function when someone moves the magnifier glass over the image:*/ glass.addEventListener("mousemove", moveMagnifier); img.addEventListener("mousemove", moveMagnifier); /*and also for touch screens:*/ glass.addEventListener("touchmove", moveMagnifier); img.addEventListener("touchmove", moveMagnifier); function moveMagnifier(e) { var pos, x, y; /*prevent any other actions that may occur when moving over the image*/ e.preventDefault(); /*get the cursor's x and y positions:*/ pos = getCursorPos(e); x = pos.x; y = pos.y; /*prevent the magnifier glass from being positioned outside the image:*/ if (x > img.width - (w / zoom)) {x = img.width - (w / zoom);} if (x < w / zoom) {x = w / zoom;} if (y > img.height - (h / zoom)) {y = img.height - (h / zoom);} if (y < h / zoom) {y = h / zoom;} /*set the position of the magnifier glass:*/ glass.style.left = (x - w) + "px"; glass.style.top = (y - h) + "px"; /*display what the magnifier glass "sees":*/ glass.style.backgroundPosition = "-" + ((x * zoom) - w + bw) + "px -" + ((y * zoom) - h + bw) + "px"; } function getCursorPos(e) { var a, x = 0, y = 0; e = e || window.event; /*get the x and y positions of the image:*/ a = img.getBoundingClientRect(); /*calculate the cursor's x and y coordinates, relative to the image:*/ x = e.pageX - a.left; y = e.pageY - a.top; /*consider any page scrolling:*/ x = x - window.pageXOffset; y = y - window.pageYOffset; return {x : x, y : y}; }
} </script>
<img id="myimage" src="Grand_Continent.jpg" width="800" height="600">
<script> /* Initiate Magnify Function with the id of the image, and the strength of the magnifier glass:*/ magnify("myimage", 3); </script>