I'd like to have a specific image display, and allow users to click on it and the image changes, kind of like a mouseover effect. However, I want it to show a random image from a set list. It'd happen once per page refresh, and be done. I'd prefer it not be reversible.
What I'm using it for is a random card draw with images. I start with the back of the card, and have many possibilities to show up when clicked.
Thanks!
Here is the basic code you would need as far as I understand
<img src="img/BackOfCard.jpg" onClick="Randomize(this)" />
<input type="hidden" value="1" id="onlyOnce">
<script type="text/javascript" language="javascript">
function Randomize(obj) {
onlyOnce = document.getElementById("onlyOnce");
if (onlyOnce.value=="1") {
var n = Math.round((100*Math.random())+0.5);
var urls = ["url1.png","url2.png","and so on"];
obj.src = urls[n];
onlyOnce.value="0";
}
}
</script>
This assumes that you have a folder called "img" with the back of card image and all the card faces stored there. The card faces will be stored in the format Ace = 1.jpg, 2 = 2.jpg, 3 = 3.jpg, King = 13.jpg and so on.
Related
I have a HTML code with a canvas and a button, and all the necessary drawings are inside the draw(canvas) function.
<script>
init = (event) => {
canvas = document.getElementById("canvas")
draw(canvas);
}
window.onload = init
</script>
<canvas id="canvas" width="500" height="400"></canvas><br>
<button type="button">Button</button>
I am trying to include this code in a WordPress post, and I have managed to do so (with both the 'WPCode' and 'Insert HTML Snippet' plugins). As long as I only have one figure it works fine, but when I try to add the figure one more time later in the post, it stops working. I should have two buttons and two figures, but instead it is two buttons and just one canvas.
It seems like the two code snippets interfere with each other. If I remove the first one, the second one works just fine. How can I include two identical figures so that they don't interfere?
I have tried inserting two independent HTML code snippets in two different WordPress blocks, expecting them to function independently.
If you place the same code twice you are calling the same function at different points and still only referencing the first canvas block while having two blocks with the same id. Set the second block to have the id of canvas2 or similar as below.
Add the canvas block where you first inserted it:
<canvas id="canvas" width="500" height="400"></canvas><br>
<button type="button">Button</button>
Add the canvas2 later in the article:
<canvas id="canvas2" width="500" height="400"></canvas><br>
<button type="button">Button</button>
Add the new script at the very end of the article in another code snippet block:
<script>
init = (event) => {
canvas = document.getElementById("canvas");
draw(canvas);
canvas2 = document.getElementById("canvas2");
draw(canvas2);
}
window.onload = init;
</script>
I have images with dynamically generated image maps. I want users to be able to click on the map and be taken through to the <area href= property.
However, when they click on the background (i.e. not in any of the map's areas) I want them to go through to a background URL.
So my code looks something like this (fiddle):
<a href="fromAnchor.html" target="_blank">
<img src="image.png" usemap="#test" />
</a>
<map name="test" id="test">
<area href="fromMap.html">
</map>
In Chrome/FX it works as I expect - if I click in the area tag's shape I get taken to fromMap.html, if I click elsewhere I get directed to fromAnchor.html.
However, in IE (tested up to IE10) clicking on the img but outside the area does nothing. It does show the URL hint in the bottom left corner, but it doesn't follow the a tag.
Is there a way around this?
I came up with a solution, but it's kind of awful (so would be very happy to see a better answer).
My workaround is to dynamically add a fallback <area> that fills the entire image and let clicks outside the exiting area's fall back to it:
var msie = /MSIE/.test(navigator.userAgent);
if (msie)
{
// Don't do this hack twice
$('map[data-iehack!="1"]').each(function ()
{
// First find the image this map applies to
var $this = $(this);
var name = $this.attr('name');
var $img = $('img[usemap="#' + name + '"]');
// Then find if the image is in an <a> tag
var $link = $img.parents('a');
if ($link.length > 0)
{
// If there is an <a> add an extra <area> that fills the image
var wrapLink = $link[0].href;
var width = $img.width();
var height = $img.height();
var $fallbackArea = $('<area shape="rect" coords="0,0,' + width + ',' + height + '" />');
$fallbackArea.attr('href', wrapLink);
$this.append($fallbackArea);
}
// Flag this map so we don't add it again
$this.attr('data-iehack', '1');
});
}
This example is in jQuery but the principal should work in other frameworks.
There has to be a better way than this - and this hack has to check the browser as I can't figure out how to detect IE's failure here.
I am trying to create chrome extension which will read text inside the particular TAG from the Webpage ...
but not able to read value
I need to pick Text inside the tag definition excluding html tags..
here i want to read the value from the tag "definition"
output:is an overwhelming urge to have of something is often connected with money
suppose web page is like this
<div id="definition">
<div class="section blurb">
<p class="short"><i>Greed</i> is an overwhelming urge to have <i>more</i>
of something
<p class="long"><i>Greed</i> is often connected with money</p>
</div>
</div>
this is what i was trying
popup.html
<script>
var newwin = chrome.extension.getBackgroundPage();
newwin.get();
</script>
background.html
<Script>
function get()
{
var myDivObj = document.getElementById("definition");
if ( myDivObj ) {
alert (myDivObj.innerHTML);
}else{
alert ( "Alien Found" );
}
}
</Script>
I moved my script from the background page to content scrit and it worked like charm..
but was just wondering why dint work in background page..?
I have a website which contains the cute conceit of a random headshot. Every time you load the page (or click the headshot), it gets replaced with a new headshot. It works great until I post a link to the website on Facebook.
What happens then is when Facebook scans the page for images, it doesn't find the random image, I assume because it doesn't run the scripts. I would love for the facebook thumbnail to also have a random image.
Is there any way to solve this without resorting to server side code?
Here's what I do now:
in head-script section
var lastTimeout = 0;
var lastHeadNum = 0;
function headURL(headCount)
{
url = "/public/images/heads/mtoy";
if( headCount < 10 )
url += "0";
url += headCount.toString();
url += ".gif";
return url;
}
function headshotImage()
{
lastHeadNum = Math.floor((Math.random()*87)+1);
document.write('<img id="headshot" src="' + headURL(lastHeadNum) + '" onclick="next_headshot();" width=150 height=150>\n');
lastTimeout = setTimeout("next_headshot();", 12000);
}
function next_headshot()
{
if (lastTimeout != 0)
clearTimeout(lastTimeout);
do {
headNum = Math.floor((Math.random()*87)+1);
} while (headNum == lastHeadNum);
lastHeadNum = headNum;
document.getElementById('headshot').src = headURL(headNum);;
lastTimeout = setTimeout("next_headshot();", 12000);
}
then later in the body-html
<div id="contents">
<script type="text/javascript">headshotImage();</script>
<H1 class="contenthead">Table of Contents</H1>
in a previous incarnation, the body-html looked like:
<div id="contents">
<img id="headshot" src="" onclick="next_headshot();">
<H1 class="contenthead">Table of Contents</H1>
and then i had a body.onload handler to call next_headshot the first time, and that had the same problem with Facebook.
If you really want Facebook to have a random image, then I think you need server-side code. But if you're happy with a fixed image, then look into OpenGraph. You should be able to put this in your <head> section:
<meta property="og:image" content="/public/images/heads/mtoy01.gif"/>
Another approach is to put the <img> tag right into the HTML (instead of generating it procedurally) and hard-code it to one image. It won't give you the initially-random image, though you could probably swap it out immediately on page load.
In my site, I would like to implement a textbox where people can input a set of strings separated by a separator character.
For example the tags textbox at the bottom of this page: tags(strings) delimited by space(separator).
To make it more clear to the user, it would make a lot of sence to give each string a different background color or other visual hint.
I don't think this is possible with a regular input[text] control.
Do you deem it possible to create something like that with javascript? Has somebody done this before me already? Do you have any other suggestions?
Basic Steps
Put a textbox in a div and style it too hide it.
Make the div look like a text box.
In the onClick handler of the div, set the input focus to the hidden text box.
Handle the onKeyUp event of the hidden text box to capture text, format as necessary and alter the innerHtml of the div.
Tis quite straightforward. I'll leave you to write your formatter but basically you'd just splitString on separator as per the Semi-Working-Example.
Simple Outline
<html>
<head>
<script language="javascript" type="text/javascript">
function focusHiddenInput()
{
var txt = document.getElementById("txtHidden");
txt.focus();
}
function formatInputAndDumpToDiv()
{
alert('Up to you how to format');
}
</script>
</head>
<body>
<div onclick="focusHiddenInput();">
Some label here followed by a divved textbox:
<input id="txtHidden" style="width:0px;" onKeyPress="formatInputAndDumpToDiv()" type="text">
</div>
</body>
</html>
Semi-Working Example
You still need to extend the click handlers to account for tag deletion/editing/backspacing/etc via keyboard.... or you could just use a click event to pop up another context menu div. But with tags and spacer ids identified in the code below that should be pretty easy:
<html>
<head>
<script language="javascript" type="text/javascript">
var myTags=null;
function init()
{
document.getElementById("txtHidden").onkeyup= runFormatter;
}
function focusHiddenInput()
{
document.getElementById("txtHidden").focus();
}
function runFormatter()
{
var txt = document.getElementById("txtHidden");
var txtdiv = document.getElementById("txtBoxDiv");
txtdiv.innerHTML = "";
formatText(txt.value, txtdiv);
}
function formatText(tagText, divTextBox)
{
var tagString="";
var newTag;
var newSpace;
myTags = tagText.split(' ');
for(i=0;i<myTags.length;i++) {
newTag = document.createElement("span");
newTag.setAttribute("id", "tagId_" + i);
newTag.setAttribute("title", myTags[i]);
newTag.setAttribute("innerText", myTags[i]);
if ((i % 2)==0) {
newTag.style.backgroundColor='#eee999';
}
else
{
newTag.style.backgroundColor='#ccceee';
}
divTextBox.appendChild(newTag);
newTag.onclick = function(){tagClickedHandler(this);}
newSpace = document.createElement("span");
newSpace.setAttribute("id", "spId_" + i);
newSpace.setAttribute("innerText", " ");
divTextBox.appendChild(newSpace);
newSpace.onclick = function(){spaceClickedHandler(this);}
}
}
function tagClickedHandler(tag)
{
alert('You clicked a tag:' + tag.title);
}
function spaceClickedHandler(spacer)
{
alert('You clicked a spacer');
}
window.onload=init;
</script>
</head>
<body>
<div id="txtBoxDivContainer">
Enter tags below (Click and Type):<div id="txtBoxDiv" style="border: solid 1px #cccccc; height:20px;width:400px;" onclick="focusHiddenInput();"></div>
<input id="txtHidden" style="width:0px;" type="text">
</div>
</body>
</html>
Cursor
You could CSS the cursor using blink (check support) or otherwise just advance and hide as necessary an animated gif.
This is quite interesting. The short answer to your question is no. Not with the basic input element.
The real answer is: Maybe with some trickery with javascript.
Apparently Facebook does something close to this. When you write a new message to multiple persons in Facebook, you can type their names this sort of way. Each recognized new name is added a bit like an tag here and has an small cross next to it for removing it.
What they seem to do, is fake the input area size by drawing an input-looking box and removing all styling from the actual input with css. Then they have plenty of logic done with javascript so that if you have added an friend as a tag and start backspacing, it will remove the whole friends name at once. etc.
So, yes, it's doable, but takes plenty of effort and adds accessibility problems.
You can look how they do that at scripts like TinyMCE, which add such features to textareas. In textareas you can use HTML to colorize text.
You can use multiple textboxes
textbox1 <space> textbox2 <space> textbox3 ....
and so on... You can then apply the background-color style to each textbox.