I have the following html, javascript and css code but, don't how to I can make it so that I only end up using html when running the program. I've heard of referencing it in the head of your html but, don't how to do this nor where I could upload .js or .css files.
jsfiddle.net/tq7h99fo/3/
You put Javascript in <script> tags, and CSS in <style> tags.
<html>
<head>
<style>
* {margin: 0; padding: 0;}
.magnify {width: 200px; margin: 50px auto; position: relative;}
.large {
width: 175px; height: 175px;
position: absolute;
border-radius: 100%;
box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85),
0 0 7px 7px rgba(0, 0, 0, 0.25),
inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
background: url('http://i.imgur.com/m57F6tb.png') no-repeat;
//background: url('http://thecodeplayer.com/uploads/media/iphone.jpg') no-repeat;
display: none;
}
.small { display: block; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var native_width = 0;
var native_height = 0;
$(".magnify").mousemove(function(e){
if(!native_width && !native_height)
{
var image_object = new Image();
image_object.src = $(".small").attr("src");
native_width = image_object.width;
native_height = image_object.height;
}
else
{
var magnify_offset = $(this).offset();
var mx = e.pageX - magnify_offset.left;
var my = e.pageY - magnify_offset.top;
if(mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0)
{
$(".large").fadeIn(100);
}
else
{
$(".large").fadeOut(100);
}
if($(".large").is(":visible"))
{
var rx = Math.round(mx/$(".small").width()*native_width - $(".large").width()/2)*-1;
var ry = Math.round(my/$(".small").height()*native_height - $(".large").height()/2)*-1;
var bgp = rx + "px " + ry + "px";
var px = mx - $(".large").width()/2;
var py = my - $(".large").height()/2;
$(".large").css({left: px, top: py, backgroundPosition: bgp});
}
}
})
})
</script>
</head>
<body>
<div class="magnify">
<div class="large"></div>
<img class="small" src="http://i.imgur.com/m57F6tb.png" width="200"/>
</div>
<script src="http://thecodeplayer.com/uploads/js/prefixfree.js" type="text/javascript"></script>
</body>
</html>
Here is the normal structure for importing CSS and JS in an HTML file.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/file1.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<!-- body content -->
</body>
<script src="js/file2.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</html>
You can create an HTML file with any text editor (just save it as .html). When you have CSS you can either put it in the same file by putting it inside of the <style> tag, or you can put it in a .css file. You can link the CSS file by <link rel="stylesheet" href="LINK TO .CSS FILE' />. Similarly you can put the JavaScript in <script> tags or put it in a .js file. Link a JavaScript file by adding the src attribute to the script tag, so <script src="LINK TO JS">
