Onclick feature over image - javascript

I am trying to make text appear when the user clicks on an image but cannt get it to work. could someone please help me i'm doing it using JavaScript.
Thanks

Here you go, and an example:
<img src='http://placehold.it/350x150' onclick='alert("Text appears...")'/>
Here's another example showing how you can do the alert and write text to a div, since the alert is of limited value. You can also just write to the div

Mikeb's code works if you are writing it in HTML. If you are using Javascript and have a reference to you element:
var imgElement = document.getElementByID('WhateverYouPutAsTheID') //or get ref some other way
imgElement.onclick = function() { alert('Message you want to display'); };
I hope this works for you!

Related

How to get the style properties of the variable in which you are storing text

tag for text area used
<textarea id="tag_text"></textarea>
I am using the following code to store the the content of text area.
var texAreaContent = document.getElementById("tag_text");
Now what code should I use to retrieve the style of every word of the text area content. Please provide the code in JavaScript and please provide a better way if you know because I am at a beginner level
I didn't get what's your problem.
i tried this in my way of understanding of your problem. Check this.
var texAreaContent = document.getElementById("tag_text");
texAreaContent.style.color="blue";
<textarea id="tag_text">Test</textarea>
With jQuery, you can do this like this
$("element").prop('tag_name')
You can change style of an element like this
$("element").css('background', 'lime')

How do you append an element but also keep it in it's original position?

I'm looking for a way to copy the exact code of an element and move it to another element while keeping it in it's original place also.
I have some JS where basically you click on a picture, the picture will then be appended to a box. However, the picture completely moves. I want the picture to stay as well as be moved to the box as I am looking to grey it out instead of make it disappear.
I don't need specific answers, just a general javascript answer on how I can achieve this, thank you.
You can achieve this by creating a clone.
$('#div').append($('#image').clone())
Since you are using jQuery have you tried clone()? - straight from the docs..
$( ".hello" ).clone().appendTo( ".goodbye" );
http://api.jquery.com/clone/
You can get the html of the image and then copy it to the image container:
javascript
function addImageTo(element){
var oldHTML = element.innerHTML;
var appendHTML = document.getElementById('yourImage').innerHTML;
element.innerHTML = oldHTML + appendHTML;
}
JQuery
function addImageTo(element){
element.append($('#yourImage').innerHTML);
}

How to make a javascript live preview

I have a blog style website . I want to create a live preview button that show me the post before sending it to db.
Until now i tried something but i don't know how to make it work. This is my code kinda poorly adapted. I tried to use:
<button onclick="document.getElementById('preview').innerHTML = this.value">Click me</button>
But i don't know how to write instead of this.valuea my textarea class and show me the code with the style applied to it.
When you write innerHTML = this.value, you reffer to the value attribute of the button.
Rather do innerHTML = document.getElementById("yourSource").value

Copying text from an element in jquery and inseting into another elelement

I am trying to create a simple js script that will copy text from a specified div element and paste it into the 'value' field of a form. This is the best I have managed to come up with:
var txt=$('div').clone();
$('#name').val(txt);
Can somebody please let me know where I am going wrong?
Thanks guys!
var txt=$('div .someclassname').text();
or var txt=$('div #someidname').text();
$('#name').val(txt);
it like that.

get content to tooltip from url in javascript

I'm using cluetip for tooltips in my web site, and I want to set the tooltip text based on the link url.
For example: I have a link on my page to "http:abc.com/display?content=sweeties" and I want the tooltip to read "sweeties"
Someone show me how, please?
You should set the title of your link to "sweeties" and then instruct whatever tooltiping plugin to use actually the title attribute for content.
I think it could work with cluetip out of the box.
var a = $("aTagsId");
var content = a.attr('href').match(/content\=([^\&]*)/)[1];
a.attr('title', content);
... setup cluetip w/ title...
One undocumented, nice, and staight forward way to do this is using a function as the first argument in cluetip call, that returns your desired content:
var normalcluetipsettings = {.. ... ... ... }
$('#mydiv').cluetip(function(){return 'hello'+' '+'world';}, normalcluetipsettings)

Categories