How To Get Mouse Pointer on Hover Back? - CSS-Tricks

This topic is empty.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts

February 20, 2014 at 4:31 pm #163555

Participant

I have successfully followed a script to change the style of the default upload button. When a user hovers over my upload button instead of a mouse pointer they see a beam pointer. How do I display the standard mouse pointer?

I have created a codepen but it doesn’t display the button so here is the code :

<script type="text/javascript">
 function getFile(){
   document.getElementById("upfile").click();
 }
 function sub(obj){
    var file = obj.value;
    var fileName = file.split("\\");
    document.getElementById("uploadimgbtn").innerHTML = fileName[fileName.length-1];
    document.myForm.submit();
    event.preventDefault();
  }
</script>

<form action="upload_file.php" method="post" enctype="multipart/form-data">
<div class="uploadimgbtn" onclick="getFile()"><p class="upload">Upload Image</p></div>
<!-- this is your file input tag, so i hide it!-->
<!-- i used the onchange event to fire the form submission-->
<div style='height: 0px;width: 0px; overflow:hidden;'><input id="upfile" type="file" value="upload" onchange="sub(this)"/></div>
<!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
<!-- <input type="submit" value='submit' > -->
</form>

.uploadimgbtn {
font-family: 'Marvel', sans-serif;font-weight:700;
font-size:24px;
background-color:#8C1717;
color:#ffffff;
border-width:1px;
border-color:#8C1717;
padding:2px 20px 2px 10px;
position:absolute;
height:50px;
width:120px;
margin-left:820px;
margin-top:-110px;
-moz-border-radius-bottomright:50px;
border-bottom-right-radius:50px;
}

p.upload {margin-top:6px;}

http://codepen.io/Nullbreaker/pen/oegkh

February 20, 2014 at 6:16 pm #163563

MBM

Participant

Added that to the javascript. Didn’t work.

February 21, 2014 at 1:53 pm #163686

MBM

Participant

Like this?

<div class="uploadimgbtn" onclick="getFile() cursor: pointer;">

February 24, 2014 at 2:59 pm #163988

MBM

Participant

Thanks. I used cursor: default; to display the arrow. Pointer displays a hand!

I have another issue. I want to automatically upload an image once a user has selected a file, just for aesthetic purposes as it saves me having to add an upload button. This codes does just that but I don’t know how to incorporate it into my existing code.

document.getElementById("file").onchange = function() {
document.getElementById("form").submit();
};

My code :

<script type="text/javascript">
 function getFile(){
   document.getElementById("upfile").click();
 }
 function sub(obj){
    var file = obj.value;
    var fileName = file.split("\\");
    document.getElementById("uploadimgbtn").innerHTML = fileName[fileName.length-1];
    document.myForm.submit();
    event.preventDefault();
}
</script>

Or would it go in the button click event?

<div class="uploadimgbtn" onclick="getFile()"><p class="upload">Chose Image</p></div>
<div style='height: 0px;width: 0px; overflow:hidden;'><input id="upfile" type="file" name="file" onchange="sub(this)"/></div>
</form>

February 24, 2014 at 5:29 pm #163998

MBM

Participant

Thanks. It’s still not firing. It’s a php page so the php is at the top then the links to the stylesheets and fonts, then the java, html and more php.

The only css inline is the styling in this div :

<div class="uploadimgbtn" onclick="getFile()"><p class="upload">Image</p></div>
<div style='height: 0px;width: 0px; overflow:hidden;'><input id="upfile" type="file" name="file" onchange="sub(this)"/></div>
</form>

The form tag code :

<form action="#" method="post" enctype="multipart/form-data" name="form" id="form">

February 24, 2014 at 6:11 pm #164005

MBM

Participant

I’ve put the javascript at the bottom. Still not firing. This is my structure :

<?php
?>

<html>
<head>

</head>

<body>

<?php
?>

<script type="text/javascript">
</script>

</body>
</html>

February 24, 2014 at 6:53 pm #164007

MBM

Participant

Awesome! That works a treat.

Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

The forum ‘JavaScript’ is closed to new topics and replies.