I want, when something happens (Ex: Click a button), that my image creates a frame around. Something like this:
Image before, without the frame
Image after click, with the frame
Can I do that with CSS?
I don't want to have two links nor two images. I want that "transformation" happens to the original image.
EDIT: I know I don't have any code, but that's because I don't have any function or idea from CSS functions. So you don't need to write code, only to tell me what to use. Hope you understand
You should use javascript onClick event handler and css border property.
Your html image and button tag.
<img src='yourimage.jpg' id='myimg'>
<button onclick="add_frame()">add frame</button>
The javascript
function add_frame(){
document.getElementById('myimg').style.border = "2px solid red";
}
Here is an example using jquery.
Add a class to any image that you want to be able to add a border to (.border-on-click), this should include a transparent border within it's CSS (if you don't do this, your elements will move around the page when the border is toggled and takes up extra space).
In the example below you can toggle the border on and off with a click.
It acts upon the image you clicked only.
Let me know if this wasn't what you wanted.
$(".border-on-click").click( function() {
$(this).toggleClass("framed");
});
img.border-on-click {
border: 4px solid transparent;
transition: all 0.5s ease;
}
img.border-on-click.framed {
border: 4px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="border-on-click" src="https://via.placeholder.com/150">
Related
All elements in the page are assigned to change background color and change border properties if hovered, but the problem is that the element I only want to change is the element directly under the cursor, It seems that when I hover something , all the parents of it is also hovered which is normal because you are also hovering to the parent of an element since its child is nested inside it.
But I found out that firefox screenshot feature can do this thing. It has a feature that lets you screenshot a certain part of the page, and in the selection process , It shows what part of the page is only saved by making a dashed border around it and a white overlay.
I think this has to do something with javascript but I don't know how to
Check if the element is hovered
Check if element is the one under the cursor by checking it's child if it's hovered.
Where to start checking things.
Let's say
<div>
<div> put border on me if hovered </div>
<div> put border on me if hovered
<span> put border on me if hovered and don't put border on parent </span>
</div>
</div>
Css
*:hover { border: 5px dashed white; }
I haven't made the javascript because I am stuck of what to do first
if you want that when you hover over a specific element, its style has changed,I can offer to do this with the help of JS
document.addEventListener('mouseover', function (e) {
e.stopPropagation();
e.target.setAttribute('style', 'border: 5px dashed red');
});
document.addEventListener('mouseout', function (e) {
e.target.removeAttribute('style');
});
You can change the style, in different ways, for example add a specific class. I hope this helps
So You want, when you hover on a particular div, that particular div must have border not the parent one.
So easy task can be achieved my CSS easily. you have to target the div's based on their className.
( Based on your code divs above )
<div>
<div className="parentBorder"> put border on me if hovered </div>
<div>
<span> put border on me if hovered and don't put border on parent </span>
</div>
</div>
The CSS File for this
.parentBorder {
border: none;
}
.parentBorder:hover {
border: 5px solid green;
}
span {
border: none;
}
span:hover {
border: 5px solid blue;
}
This will solve you problem
And by JAvaScript you can do this by initiating the onClick() Function event on the particular div for this task
My webview is using horizontal scrolling like a book to show the HTML contents. I am using scroll function to do this. My question is, how can I add a bottom border on every page using JS or jQuery?
I recommend using css to accomplish this. If you want your page's body to have a border, you would simply add this rule to your css:
body {
border-bottom:5px #f00 solid;
}
To accomplish this same result using jQuery, add this to your scripts:
$(document).ready(function() {
$('body').css({'border-bottom':'5px #f00 solid'});
});
Let me know if this accomplishes your goal!
Add a class to every page, then use that to add a border to all of them at once.
If the class name is page, then use this jQuery:
$(".page").css("border-bottom","1px solid black");
You can use any border style.
I am new to CSS3 transitions. I am trying to make a image slideshow for webkit only. there are 3 images aligned next to each other inside a wide DIV. This wide DIV is inside a container DIV whoose overflow property has been set as hidden. the width of the container DIV is equal to each Image, hence user can see only one image at a time.
here is the HTML and CSS for that.
HTML
<div id = "imageHolder">
<div id="slide1_images">
<img src="./images/fish.jpg" />
<img src="./images/desert.jpg" />
<img src="./images/space.jpg" />
</div>
</div>
CSS
#imageHolder
{
width: 320px;
height: 240px;
border: 1px solid grey;
overflow: hidden;
position: relative;
}
#slide1_images
{
position:absolute;
left:0px;
width:960px;
-webkit-transition: -webkit-transform 0.5s;
}
Now I have added a CSS hover selector in the code just to test the transition. when user hovers over the image (the inner DIV, to be precise), the whole set moves to left by 320 pixels (which is the width of each image).
CSS for hover
#slide1_images:hover
{
-webkit-transform:translate(-320px,0);
}
Upto this the code works perfectly, when I hover mouse over the first image, the set moves left and the 2nd image fits perfectly in the outer DIV.
What I want is, to perform the same action on Javascript button click. I have added a button called btnNext in my page. How can I fire the translate from the button click event? I tried the below but it does not work.
Javascript
<script type = "text/javascript">
function btnNext_clicked()
{
document.getElementById("slide1_images").style.-webkit-transform = "translate(-320px,0)"
}
</script>
I am sure I have done something stupid! could you please help me out fixing the Javascript function? Thanks a lot in advance :)
With the obvious caveat its for webkit browsers only you just need to use
.style["-webkit-transform"] = ..
as - cannot be used in an inline propery name here: style.-webkit-transform
From JavaScript you can access -webkit-transform property in this way:
var style = document.getElementById("slide1_images").style;
style.webkitTransform ='translateX(-320px)';
You can make it cross-browser friendly by accessing following properties:
transform
webkitTransform
MozTransform
OTransform
msTransform
What is the best control which can display image, call javascript and do it without postback? maybe even change an image on hover?
You're looking for the <img> tag.
A HTML Element of your choice I suppose:
<div style="background: pink url(/image.png);" onclick="alert('javascript')">
</div>
CSS:
div:hover {
background: lightgreen url(/image2.png);
}
I have an ASP page that has 5 ASP ImageButtons. The images can be clicked and then a few things happen in the code behind. I also want the images to be outlined with a border when the user clicks it so they know that one has been selected. I am using javascript to accomplish the outline with a border. But my problem is that the border applies then the page refreshed and the border is gone. I know that the Imagebuttons are causing a post back, but how can I keep my ImageButtons outline after the postback?
Javascript:
<script language="JavaScript" type="text/javascript">
function chnageborder(imageid)
{
document.getElementById(imageid).style.border = "solid 2px #2F74D0";
}
</script>
ASP Imagebutton:
<asp:ImageButton
ID="Image1" runat="server"
style="width: 48px; height: 48px; margin-right: 5px;" OnClick="Image1_Click" OnClientClick="javascript:chnageborder('Image1'); return true;"/>
You have to handle that in the server side. Basically the style can be applied in the postback of the particular image button click event.
void Image1_Click()
{
Image1.Styles.Add("border" , "solid 2px #2F74D0");
//And you need to revert the styles of the other buttons if they already have the selected style
Image2.Style["border"] = "";
.
.
Image5.Style["border"] = "";
}
Or if you want to do it in a more cleaner way, you can adopt one css class and apply that class in the code behind as one answer suggest below. You might need another css class to have the un-selected style and apply that same as above to make them look normal.
Define your border within a class selector in CSS, then apply that class to your image in the code-behind on PostBack.
CSS
.selected { border: 2px solid #2F74D0};
C#
Image1.CssClass = "selected";
It's worth noting that this is a basic example and will overwrite any existing classes. If you want to add to the class collection, this answer provides a solution.
Try this
void Image1_Click()
{
Image1.Attributes.Add("Style" , "Border:solid 2px #2F74D0");
}