0
Je souhaite supprimer la bordure autour des images sur cette page; http://oymyo.com/practice/rotating-heads/index.htmlsuppression des bordures d'image à partir d'images dans un DIV
le code est ci-dessous, il y a aussi des fichiers JS que je peux poster si besoin est
/*
Filename: rotating-heads.css
Project: rotating heads
Type: CSS
Author: Jan Dellsperger
Initial Version: 14. October 2013
This is the style sheet for the rotating heads project. All UI styles are
defined in this file.
Changelog:
12.11.2013 - Modifikationen zur leistungsverbesserung
*/
*{
margin: 0;
padding: 0;
}
.content-wrapper{
width: 0px; right:0%;)
margin: 0px auto;
}
.row{
width: 100%;
position: relative;
font-size: 0;
height: 0px;
}
.column-1-1,.column-1-3,.column-2-3{
float: left;
min-height: 1px;
}
.column-1-1{
width: 100%;
}
.text-holder{
display: none;
}
.image-holder{
position: relative;
margin: 0 auto;
width: 0px;
height: 0px;
}
.head-image,.circle{
position: absolute;
top: 0;
left: 0;
width: 260px;
height: 260px;
}
.head-image{
z-index: 0;
}
.circle{
z-index: 2;
}
.front{
z-index: 1;
}
.widget{
padding: 0px 0px;
position: relative;
top: 0;
}<!DOCTYPE html>
<html>
<head>
\t <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
\t <title>Rotating Heads</title>
\t <link href="css/rotating-heads.css" rel="stylesheet" type="text/css" /><script src="js/1.8.2.min.js" type="text/javascript"></script><script src="js/jquery.js" type="text/javascript"></script><script src="js/HeadImage.js" type="text/javascript"></script>
\t <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="content-wrapper">
<div class="column-1">
<div class="image-holder one"><img class="circle" src="img/circle.png" /> <img class="head-image up" src="img/up.jpg" /> <img class="head-image up-left" src="img/upleft.jpg" /> <img class="head-image left" src="img/left.jpg" /> <img class="head-image down-left" src="img/downleft.jpg" /> <img class="head-image down" src="img/down.jpg" /> <img class="head-image down-right" src="img/downright.jpg" /> <img class="head-image right" src="img/right.jpg" /> <img class="head-image up-right" src="img/upright.jpg" /> <img class="head-image front" src="img/front.jpg" /></div>
</div>
</div>
<script type="text/javascript">
/* Declaring the global variables */
var mouseX;
var mouseY;
var imageOne;
/* Calling the initialization function */
$(init);
/* The images need to re-initialize on load and on resize, or else the areas
* where each image is displayed will be wrong. */
$(window).load(init);
$(window).resize(init);
/* Setting the mousemove event caller */
$(window).mousemove(getMousePosition);
/* This function is called on document ready, on load and on resize
* and initiallizes all the images */
function init(){
/* Instanciate the mouse position variables */
mouseX = 0;
mouseY = 0;
/* Instanciate a HeadImage class for every image */
imageOne = new HeadImage("one");
}
/* This function is called on mouse move and gets the mouse position.
* It also calls the HeadImage function to display the correct image*/
function getMousePosition(event){
/* Setting the mouse position variables */
mouseX = event.pageX;
mouseY = event.pageY;
/*Calling the setImageDirection function of the HeadImage class
* to display the correct image*/
imageOne.setImageDirection();
}
</script></body>
</html>Je ne suis pas sûr de l'origine du contour apparaisse, il est pas présent sur la page où j'ai téléchargé le code original (https://www.cloudtec.ch/blog/web/change-image-with-jquery-mouse-position.html)
merci! haha, ima n00000b – OYMYO