using onmouseover to change text hyperlink into an image hyperlink? - javascript

Please bear with me I am brand new to learning javascript (self taught)! I am usually one to find answers on my own from just web browsing but so far I haven't found any resources explaining how to accomplish the following:
So, basically all I want to do is change this (HTML):
SPEAKERS
to an image by using javascript.
The image is kept in the same folder as the html and the js.
Here is as far as I know to go with the javascript:
function showImage()
{
picture = new Image(100,100);
picture.src = "icon2.png";
document.getElementById("speakers").innerHTML = picture.src;
}
function goBack()
{
document.getElementById("speakers").innerHTML="SPEAKERS";
}
For clarity, all I would like to do is change the text ("SPEAKERS") to an image using 'onmouseover' while using the same hyperlink in the process.
It seems like a very simple problem but I don't know enough to determine if what I want to do is even possible. If it's not possible that's fine, I would just like to know either way ;P. Thanks ahead of time!

If you're ok with using jquery, you could use .html() and .hover()
http://jsfiddle.net/u8fsU/

Try something like this to get you started (not a complete nor tested solution):
var showImage = function(){
var picture = document.createElement("img");
picture.src = "icon2.png";
picture.href = "link.html";
var speakers = document.getElementById("speakers");
speakers.parentNode.replaceChild(speakers, picture);
}
Please see https://developer.mozilla.org/en-US/docs/Gecko_DOM_Reference for a good reference to some of the available DOM properties and methods.

Related

Different Approach to Hiding image in Javascript

I'm responsible for developing an approach/algorithm to hide image on the trigger. But hiding should be in such a way that it would be hard for developers to do "inspect code" and change certain javascript variables or setting some condition true. So visibility:hidden is a no for sure because it's easy to get rid of it through "inspect code".
Only viable option I can think of is injecting image code () through JQuery which would make it quite work for someone to trigger it manually (I believe). But not sure if it's good enough.
What kind of an approach I can implement? Every opinion counts. Thank you.
To clarify: there are 2 images. each button hover will trigger visibility of one of the images. And the goal is to forbid the user from viewing both of them simultaneously. And they may avoid this by changing script conditions and variables. How to prevent that happening?
You could use something like the below to detect when someone uses inspect element to completely hide the content they're trying to change.
var currentHtmlContent;
var element = new Image();
var elementWithHiddenContent = document.querySelector("#element-to-hide");
var innerHtml = elementWithHiddenContent.innerHTML;
element.__defineGetter__("id", function() {
currentHtmlContent= "";
});
setInterval(function() {
currentHtmlContent= innerHtml;
console.log(element);
console.clear();
elementWithHiddenContent.innerHTML = currentHtmlContent;
}, 1000);
It will then show the content when they stop inspecting.

addEventListener to div element

I am trying to fire a script when the contents of a div are altered, specifically when a div receives the next set of results from a js loaded paginator.
I have this:
<script script type="text/javascript" language="javascript">
document.addEventListener("DOMCharacterDataModified", ssdOnloadEvents, false);
function ssdOnloadEvents (evt) {
var jsInitChecktimer = setInterval (checkForJS_Finish, 111);
function checkForJS_Finish () {
if ( document.querySelector ("#tester")
) {
clearInterval (jsInitChecktimer);
//do the actual work
var reqs = document.getElementById('requests');
var reqVal = reqs.get('value');
var buttons = $$('.clicker');
Array.each(buttons, function(va, index){
alert(va.get('value'));
});
}
}
}
</script>
This works well when the doc loads (as the results take a few seconds to arrive) but I need to narrow this down to the actual div contents, so other changes on the page do not fire the events.
I have tried:
var textNode = document.getElementById("sitepage_content_content");
textNode.addEventListener("DOMCharacterDataModified", function(evt) {
alert("Text changed");
}, false);
But the above does not return anything.
Can what I am trying to do be done in this way? If yes where am I going wrong?
Using Social Engine (Zend) framework with MooTools.
I did this in the end with a little cheat :-(
There is a google map loading on the page that sets markers to match the location of the results. So I added my events to the end this code namely: function setMarker() {}.
I will not mark this as the correct answer as it is not really an answer to my question, but rather a solution to my problem, which is localised to the Social engine framework.
I will add a Social engine tag to my original question in the hope it may help someone else in the future.
Thanks guys.

Play a sound on hover state

I'm trying to create a banner that would somehow look like a soundwave but behave like a piano keyboard. I'd like each key of this keyboard to play a short unique sound (.ogg or .mp3 samples) on hover state.
I know how to implement this using Flash but I'd like to stick to HTML/JS for this project and I'm having trouble actually getting it done.
The "keyboard" would look like this (SVG) :
Could you give me a few hints on how to implement this?
I'm thinking <svg>, <canvas>, or image maps could be good options.
Thank you very much for your help.
EDIT: You can try something like this instead:
Demo: http://jsfiddle.net/SO_AMK/xmXFf/
jQuery:
$("#layer1 rect").each(function(i) {
$("#playme").clone().attr({
"id": "playme-" + i,
"src": B64Notes[i]
}).appendTo($("#playme").parent());
$(this).data("audio", i);
});
$("#layer1 rect").hover(function() {
var playmeNum = $("#playme-" + $(this).data("audio"));
playmeNum.attr("src", playmeNum[0].src)[0].play();
// Reset the src to stop and restart so you can mouseover multiple times before the audio is finished
$(this).css("fill", "red");
}, function() {
$(this).css("fill", "#d91e63");
});​
I realize that you want to avoid duplication but there's no way to have multiple notes playing at the same time otherwise.
The svg is directly in the page to make the code simpler and because it would load from another domain preventing the jQuery from accessing and modifying it. To access the svg document when it's embedded from an external source, please see: http://xn--dahlstrm-t4a.net/svg/html/get-embedded-svg-document-script.html
How about assigning each key an id and using html5 <audio>?
Then using jQuery change the src attribute of audio tag?
$('#a').hover(function(){
$('#oggfile').attr("src","a.ogg");
$('#mpegfile').attr("src","a.mp3");
});
$('#c').hover(function(){
$('#oggfile').attr("src","a.ogg");
$('#mpegfile').attr("src","a.mp3");
});
$('#c').hover(function(){
$('#oggfile').attr("src","c.ogg");
$('#mpegfile').attr("src","c.mp3");
});
​
http://jsfiddle.net/wPGSv/

AIR HTMLLoader window.open is not working

I have a web project developed in Flex which I have to make work standalone using AIR.
I created Air project and loaded the web application using flash.html.HTMLLoader.
The content is loading fine and working.
There are few buttons which open different links using javascript functions window.open.
The links are not opening. The javascript function is getting called using ExternalInterface and I placed alerts in that which is displaying.
The function contains simple window.open
window.open("http://www.google.co.in","Google");
I tried several solutions mentioned but none of them are working.
http://digitaldumptruck.jotabout.com/?p=672
http://soenkerohde.com/2008/09/air-html-with-_blank-links/
http://cookbooks.adobe.com/index.cfm?event=showdetails&postId=9243
I even tried loading a simple page in HTMLLoader component with window.open method still it is not working. On button click only alert is working but window.open is not opening the link.
<html>
<head>
<title>Test</title>
<body scroll="no">
<input type="button" value="Click" onClick="window.open('http://www.google.co.in');">
</body>
</html>
Could some one help me please
This is a radical suggestion that may or may not work, but I think it's worth a try.
Override the window.open method itself
As before, wait until the Event.COMPLETE is fired, then take it from there:
var html:HTMLLoader = new HTMLLoader();
var urlReq:URLRequest = new URLRequest("whatever.html");
var oldWindowOpen:Object; // save it, just in case
html.load(urlReq);
html.addEventListener(Event.COMPLETE,
function (event:Event):void {
oldWindowOpen = html.window.open;
html.window.open = asWindowOpen;
});
function asWindowOpen(href:String, name:String="_blank", specs:Object=null, replace:Object=null):void {
var urlReq = new air.URLRequest(href);
air.navigateToURL(urlReq);
}
You should probably fill out some of the function to handle the other inputs as specified in the W3Schools Reference for Window open() Method. You may have to (or want to) change all the parameter types to Object, just to be safe, since, unlike ExternalInterface interactions, the JavaScript-ActionScript types are not automatically typecast across the AIR-WebKit exchange.
The AIR Webkit environment is quite restrictive in its support for the window.open method. See Adobe documentation on Restrictions on calling the JavaScript window.open() method.
The easiest way to deal with this is just let the system's default browser open the links. Adobe documents this very question, and shows how you can pop open url's from within AIR:
var url = "http://www.adobe.com";
var urlReq = new air.URLRequest(url);
air.navigateToURL(urlReq);
Generalizing this:
function openExternalLink(href:String):void {
var urlReq = new air.URLRequest(href);
air.navigateToURL(urlReq);
}
One option: Assuming you're running jQuery on the page, you could have all the links open externally as so:
var html:HTMLLoader = new HTMLLoader();
var urlReq:URLRequest = new URLRequest("whatever.html");
html.load(urlReq);
html.addEventListener(Event.COMPLETE,
function completeHandler(event:Event):void {
html.window.jQuery('a').click(clickHandler);
});
function clickHandler( e:Object ):void {
if (e.target && e.target.href) {
openExternalLink(e.target.href);
}
e.preventDefault();
}
For more on handling DOM Events in ActionScript, see the relevant Adobe Documentation.
None of that is tested, but hopefully it gives a rough outline.
Otherwise, if you are trying to do something fancy, like pop up AIR windows with HTMLLoader frames in them, I did find one blog post discussing that: Opening links in AIR’s HTML loader

What are some ways to speed up an img swap in jquery / javascript?

I have a slightly vague question. I have the following in my code: http://jsfiddle.net/PMnmw/2/
In the jsfiddle example, it runs smoothly. The images are swapped quickly and without any hassle. When it is in my codebase though, there is a definite lag.
I'm trying to figure out why that lag is happening. The structure of the jquery is exactly the same as above. I.e. Inside the $(document).ready (...) function, I have a check to see if the user clicked on the img (based on the classname) and then I execute the same code as in the jsfiddle.
I'm at my wits end trying to figure out what to do here... Clearly I'm not doing the swap right, or I'm being very heavy handed in doing it. Prior to this, one of my colleagues was using AJAX to do the swap, but that seems to be even more heavy duty (a full fledged get request to get the other icon...).
I've modified your fiddle: http://jsfiddle.net/PMnmw/12/
Things I've optimized:
Created a variable for both img1 and img2, so that you won't have to navigate the DOM to reference those two images anymore, thusly improving performance.
Applied a click handler to the images themselves, so you don't have to search the children of the wrapper.
The basic idea was to reduce the number of jquery selections as much as possible.
Let me know if this helped speed things up.
$(document).ready(function() {
var img1 = $('#img1');
var img2 = $('#img2');
$(".toggle_img").click(function(e) {
var target = $(e.target);
if(target.is(img1)){
img1.hide();
img2.show();
}
else if (target.is(img2)) {
img2.hide();
img1.show();
}
});
});
Images that are not visible are normally not loaded by the browser before they are made visible. If there seems to be a problem, start by downloading an image optimizer like RIOT or pngCrush to optimize your images.
If it's only two arrows, you should consider joining them into a CSS sprite.
You could try not doing everything with jQuery, but it shouldn't really make that much difference.
Something like this maybe, with the hidden image loaded in JS and some traversing done outside jQuery (but that is probably not the problem, although the code seems overly long for a simple image swap?) :
$(document).ready(function() {
var img=new Image();
img.src='http://i.imgur.com/ZFSRC.png'; //hidden image url
$(".wrapper").click(function(e) {
if(e.target.className=='toggle_img') {
$('.toggle_img').toggle();
if (e.target.parentNode.childNodes[1].style.display=='none') {
console.log("hello");
} else {
console.log("goodbye");
}
}
});
});
FIDDLE
​

Categories