I´m having problem making a little emoticons system for my chat. I´m working with the data attribute of HTML. So that their is a different data for every emoticon.
So this is the HTML part
<div class="emoticons">
<img src="emots/emot-1.png" alt=":)" title=":)">
<img src="emots/emot-2.png" alt=";)" title=";)">
<img src="emots/emot-3.png" alt=":(" title=":(">
<img src="emots/emot-4.png" alt=":D" title=":D">
<img src="emots/emot-5.png" alt=":P" title=":P">
<img src="emots/emot-6.png" alt="=)" title="=)">
<img src="emots/emot-7.png" alt=":|" title=":|">
<img src="emots/emot-8.png" alt="=|" title="=|">
:|" class="emoticon"><img src="emots/emot-9.png" alt=">:|" title=">:|">
:D" class="emoticon"><img src="emots/emot-10.png" alt=">:D" title=">:D">
<img src="emots/emot-11.png" alt="o_O" title="o_O">
<img src="emots/emot-12.png" alt="=O" title="=O">
<img src="emots/emot-13.png" alt="<3" title="<3"><!--3-->
<img src="emots/emot-14.png" alt=":S" title=":S">
<img src="emots/emot-15.png" alt=":*" title=":*">
<img src="emots/emot-16.png" alt=":$" title=":$">
<img src="emots/emot-17.png" alt="=B" title="=B">
<img src="emots/emot-18.png" alt=":-D" title=":-D">
<img src="emots/emot-19.png" alt=";-D" title=";-D">
<img src="emots/emot-20.png" alt="*-D" title="*-D">
</div>
This is my JS
/* Emoticons part */
$('a[href]').click(function(){
var emot = $('.emoticon').attr('data-emot');
$('#inputvalue').val($('#inputvalue').val() + emot);
});
So the problem is that when I press on an emoticon, it needs to give me :-) or ;-)/(y). Now it keeps giving me this :). So it keeps giving me the first one of that list, can somebody help me?
Thank you very much in advance! English isn't also my mother languages, my apologize for any bad grammar of spell mistakes :-)
use this instead of ".emoticon", as you want emotion of that link not others with class "emoticon"
$('a[href]').click(function(){
var emot = $(this).attr('data-emot');
$('#inputvalue').val($('#inputvalue').val() + emot);
});
Just change
var emot = $('.emoticon').attr('data-emot');
to this:
var emot = $(this).attr('data-emot');
Related
I have 5 small images and 1 image that is twice the size as the small ones. What I'm trying to do is whenever you hover on the small images the big image changes to the image you are hovering. I am having a hard time searching for methods and functions but luck as of yet. this is what I have
<div class="bigImg">
<img id="image0" src="images/image1.png">
</div>
<img id="image1" src="images/image1.png">
<img id="image2" src="images/image2.png">
<img id="image3" src="images/image3.png">
<img id="image4" src="images/image4.png">
<img id="image5" src="images/image5.png">
I was trying to add this function that I saw somewhere else here
function mouseOver() {
document.getElementById("image0").innerHTML = '<"image2.png"/>';
}
function mouseOut() {
document.getElementById("image0").innerHTML = '<img src="image1.png" />';
}
I wrote the img tag as
<img id="image1" onmouseover="mouseOver()" onmouseout="mouseOut()" src="images/image1.png">
for all of the images but wasn't working. Can someone steer me in the right direction, please?
This is how I did it:
function mouseOut() {
document.getElementById("image0").src = 'http://lorempixel.com/g/600/600/';
}
function changePic(elem) {
document.getElementById("image0").src = elem.src;
}
Here is the JSFiddle demo
If you want to do it using Jquery you can try this.
<div class="bigImg"></div>
<img class="imgLink" src="http://dummyimage.com/100x100/eb00eb/fff" target="http://dummyimage.com/100x100/eb00eb/fff">
<img class="imgLink" src="http://dummyimage.com/100x100/000/fff" target="http://dummyimage.com/100x100/000/fff">
<img class="imgLink" src="http://dummyimage.com/100x100/999/fff" target="http://dummyimage.com/100x100/999/fff">
JS
$('.imgLink').hover(function(){
$('.bigImg').css({'background':'url('+ $(this).attr('target') +')'});
},function(){
$('.bigImg').css({'background':''});
});
Demo here
Basic concept behind this is we have to catch mouseover and mouseout events. Now, on mouse over we have to change the src attribute of that particular Image and vice versa for getting back the original image.
Try this one :
function mouseOver(element) {
document.getElementById(element).src = 'https://www.google.co.in/images/google_favicon_128.png';
}
function mouseOut(element) {
document.getElementById(element).src = 'https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/128/social_google_box.png';
}
<div class="bigImg"><img id="image0" src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/128/social_google_box.png"></div>
<img id="image1" onmouseover="mouseOver('image1')" onmouseout="mouseOut('image1')" src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/128/social_google_box.png">
<img id="image2" onmouseover="mouseOver('image2')" onmouseout="mouseOut('image2')" src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/128/social_google_box.png">
<img id="image3" onmouseover="mouseOver('image3')" onmouseout="mouseOut('image3')" src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/128/social_google_box.png">
<img id="image4" onmouseover="mouseOver('image4')" onmouseout="mouseOut('image4')" src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/128/social_google_box.png">
<img id="image5" onmouseover="mouseOver('image5')" onmouseout="mouseOut('image5')" src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/128/social_google_box.png">
Hi_I’m trying to make a random number appear inside an img src= address in a div, so that a random image is generated every time the div is loaded.
I have 10 images and their directory addresses are:
"pictures/number1.jpg"
"pictures/number2.jpg"
"pictures/number3.jpg"
................
"pictures/number10.jpg"
I’m able select one of these at random with the following Javascript:
var num = Math.floor(Math.random() * 10 + 1);
img.src = "pictures/number" +num +".jpg";
This generates a random number between 1 and 10 and places it inside the address to locate the image.
This works perfectly when the img.src is used inside the Javascript file, but I’m wondering if it’s possible to use this method when img src= is part of a HTML page. I’m trying to apply a similar process to the following HTML code:
<script>
var num = Math.floor(Math.random() * 10 + 1);
randomimage = "pictures/number" +num +".jpg";
</script>
<div id="JohnDIV" align="center"> <img src=randomimage alt="If you can see this, then the image didn't load properly" class="myclass1" /> </div>
<div id="JackDIV" align="center"> <img src=randomimage alt="If you can see this, then the image didn't load properly" class="myclass1" /> </div>
<div id="JaneDIV" align="center"> <img src=randomimage alt="If you can see this, then the image didn't load properly" class="myclass1 /> </div>
This isn't working, it's just showing me the alt= message. I'm not sure if I've defined randomimage correctly.
I'm really confused about how to go about doing this the right way, any help would be greatly appreciated!
Thanks in advance!
Edit
As to why your code isn't working: You can't apply randomimage to the source of the image in plain HTML. You have to do that using Javascript. To do that you have to select the element you want to manipulate and modify the src attribute through Javascript.
Since you tagged this with jQuery I'll start by using it!
You can use an .each() loop on your myClass1 class to iterate over each image and change the image src for each image with the given class.
Fiddle
$('.myClass1').each(function() {
var num = Math.floor(Math.random() * 10 + 1),
img = $(this);
img.attr('src', 'pictures/number' + num + '.jpg');
img.attr('alt', 'Src: ' + img.attr('src'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="JohnDiv">
<img src="" class="myClass1" alt="Not Working!" />
</div>
<div class="JohnDiv">
<img src="" class="myClass1" alt="Not Working!" />
</div>
<div class="JohnDiv">
<img src="" class="myClass1" alt="Not Working!" />
</div>
<div class="JohnDiv">
<img src="" class="myClass1" alt="Not Working!" />
</div>
For testing purposes the image's alt attribute is set to the src of the image.
Edit
Here is another solution using plain Javascript.
Fiddle
var imgs = document.getElementsByClassName('myClass1');
for (var i = 0; i < imgs.length; i++) {
var num = Math.floor(Math.random() * 10 + 1);
imgs[i].src = 'pictures/number' + num + '.jpg';
imgs[i].alt = imgs[i].src;
}
<div class="JohnDiv">
<img src="" class="myClass1" alt="Not Working!" />
</div>
<div class="JohnDiv">
<img src="" class="myClass1" alt="Not Working!" />
</div>
<div class="JohnDiv">
<img src="" class="myClass1" alt="Not Working!" />
</div>
<div class="JohnDiv">
<img src="" class="myClass1" alt="Not Working!" />
</div>
Assign an id to the img tag
<img src="" alt="If you can see this, then the image didn't load properly" class="myclass1" id="sample"/>
In your javascript,on the fly you can add an src of your choice
<script>
var num = Math.floor(Math.random() * 10 + 1);
randomimage = "pictures/number" +num +".jpg";
document.getElementById('sample').src=randomImage;
</script>
I created a javascript animation to move a picture to the right when on mouseover and to go back to its resting position when the mouse exits the image. It works flawlessly for the first image but when I try the other iterations the first image moves instead of the one I hover on.
Here is the HTML code:
<div class="sectionJoueur">
<div class="scroller">
<figure id="infos" class="nomPositionCourt A">
<img src="images/infoMathieuD.png">
</figure>
<figure class="img">
<img src="images/md.jpg">
</figure>
</div>
</div>
<div class="sectionJoueur">
<div class="scroller">
<figure id="infos" class="nomPositionCourt B">
<img src="images/infoMathieuD.png">
</figure>
<figure class="img">
<img src="images/md.jpg">
</figure>
</div>
</div>
<div class="sectionJoueur">
<div class="scroller">
<figure id="infos" class="nomPositionCourt C">
<img src="images/infoMathieuD.png">
</figure>
<figure class="img">
<img src="images/md.jpg">
</figure>
</div>
</div>
I'm trying to use the classes names "class="nomPositionCourt A">" the target the specific image being hovered on but it doesn't seem to be working.
Here is the JS code:
function over(){
if ( $("#infos").hasClass("A") ){
$("#infos").stop().animate({"margin-left": +0});
$(".img").mouseleave(out);
}
else if ( $("#infos").hasClass("B") ){
$("#infos").stop().animate({"margin-left": +0});
$(".img").mouseleave(out);
}
}
function out(){
$("#infos").stop().animate({"margin-left": -287});
}
At first glance, it looks like the reason is that both of your images are using the same ID tag (which is bad practice).
This is the code I'm looking at:
figure id="infos"
You are using that same ID tag twice. When your code runs, it's picking up the first "infos" tag it comes to, which is your first image.
Make sure to use unique ID tags and this should help resolve your problem.
You have assigned the id attribute to more than one element which suppose to be unique id="infos" class can be assigned to multiple elements but id should be unique
Try this one by changing the id to class
$(".nomPositionCourt").hover(function(){
if ( $(this).hasClass("A") ){
$(this).stop().animate({"margin-left": +0});
$(".img").mouseleave(out);
}
else if ( $(this).hasClass("B") ){
$(this).stop().animate({"margin-left": +0});
$(".img").mouseleave(out);
}
},function(){
$(this).stop().animate({"margin-left": -287});
})
In $(this) you have the object of current hovered image
Here is the Reference
just joined today loved this site already.
My Question is that. i am trying to create 6 Menus for my Web. like Eg { home, about us, service ..... } and i want the images to change whenever the users mouse hovers the menu's. I got the scrip actually from online souce. But it was an example for one image Here are the codes:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
function roll_over(img_name, img_src)
{
document[img_name].src = img_src;
}
And for the body
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<A HREF="some.html" onmouseover="roll_over('but1', 'icon2.gif')"
onmouseout="roll_over('but1', 'icon1.gif')">
<IMG SRC="icon1.gif" WIDTH="100" HEIGHT="50"
NAME="but1" BORDER="0">
</A>
Now i tried to multiply these five times, ( just repeated the codes and changed the picture name ) - But whenever i hover on the images they do not change.
So my Q - is: How do you make the above code from a one image changer to 6?
Thanks !
Try using an id for each image (id must be unique, so there should be no elements with the same id):
<A HREF="some.html" onmouseover="roll_over('but1', 'icon2.gif')" onmouseout="roll_over('but1', 'icon1.gif')">
<IMG SRC="icon1.gif" WIDTH="100" HEIGHT="50" ID="but1" BORDER="0" />
</A>
And this code:
function roll_over(img_id, img_src) {
document.getElementById(img_id).src = img_src;
}
Ok I figured it out. Should set a unique name for every Image.
Try this code
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<script>
function roll_over(img_name, img_src)
{
document[img_name].src = img_src;
}
</script>
<A HREF="some.html" onmouseover="roll_over('but1', '10.gif')"
onmouseout="roll_over('but1', '10-roll.gif')">
<IMG SRC="10-roll.gif" WIDTH="100" HEIGHT="50"
NAME="but1" BORDER="0">
</A>
<A HREF="some.html" onmouseover="roll_over('but2', '1-roll.gif')"
onmouseout="roll_over('but2', '1.gif')">
<IMG SRC="1.gif" WIDTH="100" HEIGHT="50"
NAME="but2" BORDER="0">
</A>
<A HREF="some.html" onmouseover="roll_over('but3', '2-roll.gif')"
onmouseout="roll_over('but3', '2.gif')">
<IMG SRC="2.gif" WIDTH="100" HEIGHT="50"
NAME="but3" BORDER="0">
</A>
hope this works
Okay, so I am in the process of recreating this feature:
http://www.w3.org/html/logo/#the-technology
I current have it so when you click on a link, it will add a class to the image that relates to that link (href="#one" on the <a> and then id="#one" on the <img>), however it is currently not going through each <a> tag and only one. And also it is not removing the class I requested.
Code follows:
JS
$(document).ready(function() {
var container = '#portfolio #text_container';
var img_container = '#portfolio #image_container';
$(container).children('a').bind('click', function() {
var this_attr = $(this).attr('href');
var this_img = $(img_container).find('img').attr('id');
if(this_attr == this_img) {
//$(img_container).find('img').hasClass('current').removeClass('current');
// ^^^ This line isn't working, any ideas? :/
$(img_container + ' img[id*="' + this_attr + '"]').addClass('current');
}
else {
alert(this_img + ' this img');
alert(this_attr + ' this attr');
}
});
});
And the HTML is as follows
<div id="portfolio">
<div id="image_container">
<img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" alt="" class="current" id="#one" />
<img src="http://static.jquery.com/files/rocker/images/btn_downloadLarge.gif" alt="" id="#two" />
</div>
<div id="text_container">
Item 1
Item 2
<p id="#one" class="current">A bunch of text!</p>
<p id="#two">The second bunch of text!</p>
</div>
</div>
Please let me know if you need any more information :)
rcravens fixed this with the following code..
JS
$(document).ready(function() {
$('#text_container a').click(function(evt) {
evt.preventDefault();
$('.current').removeClass('current');
var href = $(this).attr('href');
$("." + href).addClass('current');
});
And the HTML..
<div id="portfolio">
<div id="image_container">
<img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" alt="" class="one current" />
<img src="http://static.jquery.com/files/rocker/images/btn_downloadLarge.gif" alt="" class="two" />
</div>
<div id="text_container">
Item 1
Item 2
<p class="one current">A bunch of text!</p>
<p class="two">The second bunch of text!</p>
</div>
</div>
My interpretation of what you are trying to do is here:
http://jsfiddle.net/rcravens/wMhEC/
The code is changed a bit. You shouldn't have multiple elements with the same id.
Bob
The reason this isn't working:
if(this_attr == this_img)
is because this_attr is a URL and this_img is an ID attribute value.