Changing the border on an image map - javascript

How do I change the border of an image map(on mouse over) that i have placed over a part of the image

You can use jQuery:
$('#imagemapid').mouseover(function() {
$(this).css("border","solid 1px red");
});

If you do use jQuery, which would be wise, use hover so you can remove the border as well.
$('#imagemapid').hover(
function() {
$(this).css("border","solid 1px red");
},
function() {
$(this).css("border","none");
}
);

Since you ask in javascript then I'll fist show your desired solution
function imageon(here)
{
var elem= document.getElementById(here);
elem.style.border = "solid 2px grey";
}
in jquery you can just do this
$(function(){
$('#d1').mouseover(function() {
$(this).css("border","solid 2px grey");
});
});
with html like this
<img name="d1" id="d1" href="LINK #1" onmouseover="imageon('d1');" >

Related

JQuery: how to find element that lies after current element

Suppose, we have 2 checkboxes and 2 divs that follow the checkboxes:
<div class="wrapper">
<input type="checkbox" name="checkbox1" checked="" />
</div>
<div class="border"></div>
<div class="wrapper">
<input type="checkbox" name="checkbox2" checked="" />
</div>
<div class="border"></div>
My goal is to toggle the color of the appropriate "border" div, lying below the checkbox. The problem is, I don't know how to get the appropriate div. I tried this, but it doesn't work:
$('input[type="checkbox"]').change(
function ()
{
var div = $(this).find('div');//<-- ?
if ($(this).checked)
{
div.css("border", "solid 2px blue");
}
else
{
div.css("border", "solid 2px black");
}
});
jsfiddle
The problem is that the .find() method will select any descendant elements.
Since the input element is self-closed and doesn't contain any descendant elements, nothing is selected with $(this).find('div').
You could select the parent div element, and then the immediately following element:
$(this).parent().next();
The above will select the immediate parent element. It may be safer using the .closest() method in order to select the ancestor .wrapper element (just in case nesting varies):
$(this).closest('.wrapper').next();
In addition, jQuery objects don't have a checked property, you should retrieve the checked property of the DOM element, therefore $(this).checked should be this.checked or you could simply use the .prop() method to retrieve the checked property from the DOM element in the jQuery object by using: $(this).prop('checked').
Updated Example
$('input[type="checkbox"]').on('change', function() {
var div = $(this).closest('.wrapper').next();
if (this.checked) {
div.css("border", "solid 2px blue");
} else {
div.css("border", "solid 2px black");
}
});
As a side note, I'd suggest simply toggling a class on the corresponding element instead:
Updated Example
.border.blue-border {
border-color: blue;
}
$('input[type="checkbox"]').on('change', function() {
$(this).closest('.wrapper').next().toggleClass('blue-border')
});
Change it to var div = $(this).parent().next('.border');
You need to take parent().next() as was mentioned in some answers...
Also, checkbox status was not valuated correctly.
Try this solution:
$('input[type="checkbox"]').change(
function () {
var div = $(this).parent().next();
if ($(this).is(":checked")) {
div.css("border", "solid 2px blue");
} else {
div.css("border", "solid 2px black");
}
}
);
https://jsfiddle.net/gv3pqo2z/3/

How to let onclick disappear after clicking on something else

I am just working on my new webspace and I have a small problem.
I know have to input tags with an onclick function
<script>
function mark( el ) {
el.style.borderBottom= "3px solid white";
}
</script>
When I click on the first input the border appears as I want but when I click on the other input the border of the first input tag is still there.
So how can I let the function only work when it's only clicked on the input tag itself and not when another input is clicked as well
Thanking you in anticipation
Just use CSS's :focus pseudo class:
input:focus {
border-bottom:3px solid red;
}
<input type="text">
<input type="text">
MDN Docs
You can easily use CSS Focus selector. input:focus
input:focus {
background-color: yellow;
border-bottom:3px solid white;
}
<div><input type="text"></div>
<br/>
<div><input type="text"></div>
Before you add style to this specific element you can remove style of all inputs or something like this:
function mark( el ) {
var input = document.getElementsByTagName("input");
for(var i =0;input.length>i;i++){
input[i].removeAttribute("style");
}
el.style.borderBottom= "3px solid white";
}
Here is what I would do. First, create a mark and an unmark functions. Then trigger the mark function at "onmousedown" and unmark at "onmouseup" event. Therefore, this border will only be shown when you have the mouse button pressed.
<script>
function mark( el ) {
el.style.borderBottom= "3px solid white";
}
function unmark( el ) {
el.style.borderBottom= "none";
}
</script>

change border/color onFocus

I tried to make script which changes color of border-bottom of div after having focus on
<input type="text">
and then changing back to default color after clicking somewhere else.
This is what i tried:
Css:
.div1 {border-bottom:1px solid #ccc;}
Javacript:
function inputFocus(){ $(".div1").css("border-bottom","1px solid #ffba00"); };
Html:
<input type="text" onFocus="inputFocus();">
The first part (changing color on focus) works fine, however after clicking somewhere else (not having focus on input) it doesnt change back to normal style as set in css file.
any idea what im doing wrong?
I'd suggest:
$('input').focus(
function(){
$(this).css('border-bottom','1px solid #000');
}).blur(
function(){
$(this).css('border-bottom','1px solid #ccc');
});​
JS Fiddle demo.
Though if you're amenable to CSS:
input:focus,
input:active {
border-bottom: 1px solid #000;
}
JS Fiddle demo.
$('input').focus(function(){
$(this).css('border-bottom-color','#ffba00');
});
$('input').blur(function(){
$(this).css('border-bottom-color','#ccc');
});
You shold add a function to onBlur event to rollback your change
You have to use onBlur event.
JavaScript:
function inputBlur() {
$(".div1").css("border-bottom","1px solid #ccc");
}
HTML:
<input type="text" class="div1" onFocus="inputFocus();" onBlur="inputBlur();">
However, the better option will be using class toggling.
HTML:
<input type="text" class="myinput">
CSS:
.myinput {
border-bottom:1px solid #ccc;
}
.myinput.active {
border-bottom:1px solid #ffba00;
}
JavaScript:
$(function() {
$(".myinput").on("focus", function() {
$(this).addClass("active");
}).on("blur", function() {
$(this).removeClass("active");
});
});
instead of calling a function in html you can try this:
.border {border-bottom:1px solid #ccc;}
$("input[type='text']").focus(function(){
$(this).addClass("border")
})
$("input[type='text']").blur(function(){
$(this).removeClass("border");
})
this happens because the changed css is not reverted after losing focus from control.
This would help:
<input type="text" onFocus="inputFocus();" onblur="inputBlur();">
function inputFocus(){ $(".div1").removeAttr('style'); };
You shouldn't be using JavaScript to do this. CSS has a :focus selector that is much more appropriate for this.
.div1 {border-bottom:1px solid #ccc;}
.div1:focus {border-bottom:1px solid #ffba00;}

Change text box border when it is clicked

I am making a website and would like the border color of the text boxes to change on hover and when they are clicked.
I have searched and found a few people showing the code for how to do it. I tried to run it from my LAMP server (dont know if embedded JS will work on a Lamp server) although it didnt work. The code was javascript which I don't really know so I couldn't understand what what was going wrong.
This is the code:
onload=function(){
var inp=document.getElementsByTagName('input'), i=0, t ;
while(t==inp[i++]){
if(t.type=='text'){
t.onclick=function(){this.style.border='1px solid red'}
}
}
}
</script>
Is there a way to do what I am wanting just with CSS/html or will I need to learn JavaScript as well?
If its not too hard could explain how to do it or show me some example code?
Cheers - Cohen.
Yes this can be done using CSS pseudo-classes
Here is an example:
<style>
.fancyText:hover{border:1px solid red;}
.fancyText:focus{border:1px solid red;}
</style>
<input type='text' class='fancyText' />
#Aaron is right, and you may visit w3school for css learning,
if you want it using java-script you only need function onFocus, onBlur and access the text box via id
function change()
{
var a = document.getElementById('fansy');
a.style.border = '1px solid red';
}
Why dont use jQuery to make it simpler?
$(document).ready(function(){
$('input').each(function(){
if($(this).attr('type')=='text')
{
$(this).focus(function(){
$(this).css({'border':'1px solid red'});
});
$(this).blur(function(){
$(this).css({'border':'1px solid green'});
});
}
});
});
Then you'll get multi browser support also....
Don't forget <script src="[the_path_to_jquery_file]" type="text/javascript"></script>
to include the jquery-file.
If you replace this
$('input').each(function(){
if($(this).attr('type')=='text')
{
$(this).focus(function(){
$(this).css({'border':'1px solid red'});
});
$(this).blur(function(){
$(this).css({'border':'1px solid green'});
});
}
});
with this
$('input[type="text"]').each(function(){
$(this).focus(function(){
$(this).css({'border':'1px solid red'});
});
$(this).blur(function(){
$(this).css({'border':'1px solid green'});
});
});
you will automatic get the inputs with attr. type = text.
Here is more fact about jQuery attr selecting
#myTextarea {
border: 2px solid black;
}
#myTextarea:focus {
border-color: red;
outline: none;
}
In the HTML, the textarea element is given an ID of "myTextarea". In the CSS, the #myTextarea selector sets the initial border color to black and the #myTextarea:focus selector changes the border color to red when the textarea is clicked on and has focus. The outline: none; is added to remove the default outline that appears when the textarea is in focus.

Jquery click function effect

I have a jquery code, but I'm a little bit confused on how can I put a css on this:
$(document).ready(function () {
$('span.account-menu').click(function () {
$('ul.menu').slideToggle('medium');
});
});
I wanted to add this css in the click function.
border: 1px solid #999999;
background-color: #333333;
This style, I wanted to effect only in 'span.account-menu' and not affecting ul.menu. I try the code that you have given but the problem is when I click back the menu the style will not disappear.
You can either
add those css attributes manually by using .css()
add a css class by using .addClass()
Example
$(document).ready(function () {
$('span.account-menu').click(function () {
$('ul.menu').slideToggle('medium', function(){
$(this).css({
border: '1px solid #999999',
backgroundColor: '#333333'
});
});
});
});
Using the .css() method.
http://api.jquery.com/css/
Just do something like:
$('ul.menu').slideToggle('medium').css({'border': '1px solid #999999',
'background-color': '#333333'});

Categories