Setting background color after setting background image
Question
Following is the html-javascript code for setting the background image and background image.
<html>
<link rel="stylesheet" type="text/css" href="try2.css">
<body>
Choose the color<br>
<div class="foo" id="#13b4ff" style="background-color:#13b4ff;"></div>
<div class="foo" id="ab3fdd" style="background-color:#ab3fdd;"></div>
<div class="foo" id="ae163e" style="background-color:#ae163e;"></div>
<br><br>
<div id="myframe1" style="padding:5px;width:300px;height:400px;border:1px solid black;">
<p><img src="img-thing.png" style="width:200px;height:200px;"/><p>
</div>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$('.foo').click(function(){
var str1 = $(this).attr('id');
var myframe = document.getElementById('myframe1');
myframe.style.backgroundColor=str1;
myframe.style.width=300;
myframe.style.height=400;
});
});
</script>
<div><input type='file' onchange="readURL(this);" />
<img id="blah"/></div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#myframe1').css({
'background':'url('+e.target.result +')',
'background-size':'310px 410px'
});
};
reader.readAsDataURL(input.files[0]);//To display images uncomment this
}
}
</script>
</body>
</html>
The CSS FILE FOR COLORS IS(just in case you need to look at that as well)
.foo {
float: left;
width: 20px;
height: 20px;
margin: 5px 5px 5px 5px;
border-width: 1px;
border-style: solid;
border-color: rgba(0,0,0,.2);
}
Now the problem is: I want that user may click upload image option first and upload the image as a background. But once that is done it not allowing user to se color as a background. How to fix that? On the contrary if color is choosen and then image, image can override as background.I want that both must be able to override each other. For convenience I also the fiddle link : here Also one more issue in the fiddle, other colors are not showing up, but they are working in my html file.
3 answers
solution1
2 ACCPTED 2014-06-17 04:07:58
First of all correct your id name of class foo . use # in all ids ok
next empty the background of the div while on clicking of color div by
myframe.style.background="";
solution2
1 2014-06-17 04:05:01
I think you can achieve by adopting two DIVs, one of them is used to render background images and the other render background color.
By changing 'z-index' of DIV, you can display COLOR at top or bottom.
Hope this can help you .
solution3
1 2014-06-18 00:59:01
The following code should work under mainstream browser. Take a try.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<style>
#DivBgColor,#DivBgImage{
position:absolute;
left:100px;
top:100px;
width:300px;
height:300px;
}
#DivBgColor{background-color:red;z-index:2}
#DivBgImage{background-image: url(https://s.yimg.com/rz/l/yahoo_en-US_f_p_142x37.png);background-repeat: no-repeat;z-index:4}
</style>
<script language=javascript>
function makeColorAbove(){
var objColor = document.getElementById("DivBgColor");
var objImage = document.getElementById("DivBgImage");
objColor.style.zIndex=2;
objImage.style.zIndex=1;
}
function makeImageAbove(){
var objColor = document.getElementById("DivBgColor");
var objImage = document.getElementById("DivBgImage");
objColor.style.zIndex=1;
objImage.style.zIndex=2;
}
</script>
<body>
<div id="DivBgColor" ></div>
<div id="DivBgImage"></div>
<input type=button value="makeColorAbove" onclick="makeColorAbove()">
<input type=button value="makeImageAbove" onclick="makeImageAbove()">
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.