Printable View
Hi,
im using this code right now
but i need it to get the element by class instead. I tried just by changing it to document.getElementByClassName but it didnt work. Why? Could you please give me some ideas?Code:<script type="text/javascript">
function retract() {
document.getElementById("ret-banner").id = 'exp-banner';
}
function expand() {
document.getElementById("exp-banner").id = 'ret-banner';
setTimeout('retract()', 3000)
}
</script>
Thank you.
Why not show the rest of the HTML display? I don't like to develop and test code from scratch if you have the start of something already.
Also, how are your classes currently defined in the <style> tag?
If you want help, it seems you should also want to help us help you!
Well, the html is quite simple:
Code:<div id="exp-banner">
<img src="transparent.png" onmouseover="expand()">
</div>
and thats about it.Code:#exp-banner {
clip: rect(0px, 150px, 220px, 0px);
position: absolute;
}
#ret-banner {
clip: rect(0);
}
Thank you.
Your 'clip' seems to give a lot of warnings in FF. You might want to investigate that further.
However, you need not use .className if you show choose.
I saw no need for two different image elements.
Code:<!DOCTYPE HTML>
<html>
<head>
<title> Untitled </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#exp-banner { clip: rect(0px, 150px, 220px, 0px); position: absolute; }
#ret-banner { clip: rect(0); }
</style>
</head>
<body>
<div>
<img id="exp-banner" src="" onmouseover="expand()"> <!-- transparent.png ??? -->
</div>
<script type="text/javascript">
var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
var imgList = ['11.jpg','12.jpg'];
function retract() {
document.getElementById("exp-banner").src = baseURL+imgList[0];
}
function expand() {
document.getElementById("exp-banner").src = baseURL+imgList[1];
setTimeout('retract()', 3000)
}
window.onload = function() {
retract();
}
</script>
</body>
</html>
document.getElementsByClassName
OK in newer browsers.Quote:
Originally Posted by postonoh
You will need to create your own (google search or look on this forum) if older browsers.
As already stated *document.getElementByClassName* is wrong and needs to be plural as it will return a nodeList which is a collection of elements.Quote:
Originally Posted by supercain
BUT first your original work with the errors removed
HTML Code:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>error free orginal</title>
<style>
#exp-banner {
clip: rect(0px, 150px, 150px, 0px);
position: absolute;
}
#ret-banner {
clip: rect(0, 0, 0, 0);
}
</style>
</head>
<body>
<div id="exp-banner">
<img src="http://lorempixel.com/400/400/animals/" onmouseover="expand()">
</div>
<script>
function retract() {
document.getElementById("ret-banner").id = 'exp-banner';
}
function expand() {
document.getElementById("exp-banner").id = 'ret-banner';
setTimeout(retract, 3000);
}
</script>
</body>
</html>
to be continued...
this is an alternative way to do it BUT with a click event as mouse over is worrisome..
This uses the new classList that is supported in all new browsers now.
if you require backward compatibility then add the work around. (homework for you).
to be continued.HTML Code:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>class add remove</title>
<style>
.exp-banner {
clip: rect(0px, 150px, 150px, 0px);
position: absolute;
}
</style>
</head>
<body>
<p>Click image to enlarge....</p>
<div id="someID" class="exp-banner">
<img src="http://lorempixel.com/400/400/animals/" id="omo">
</div>
<script>
function retract() {
document.getElementById("someID").classList.add('exp-banner');
document.getElementById('omo').addEventListener('click', expand, false);
}
function expand() {
document.getElementById("someID").classList.remove('exp-banner');
document.getElementById('omo').removeEventListener('click', expand, false);
setTimeout(retract, 3000);
}
document.getElementById('omo').addEventListener('click', expand, false);
</script>
</body>
</html>
Now for the *document.getElementsByClassName* just to round it off..
Not perfect BUT you can do the homework...
done.HTML Code:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Node List</title>
<style>
.exp-banner {
clip: rect(0px, 150px, 150px, 0px);
position: absolute;
}
.ret-banner {
clip: rect(0, 0, 0, 0);
}
</style>
</head>
<body>
<p>Click image to enlarge...</p>
<div class="exp-banner" id="omo">
<img src="http://lorempixel.com/400/400/animals/" id="omo">
</div>
<script>
function retract() {
var elementFromList = document.getElementsByClassName("ret-banner")[0];
document.getElementById('omo').addEventListener('click', expand, false);
elementFromList.classList.remove('ret-banner');
elementFromList.classList.add('exp-banner');
}
function expand() {
var elementFromList = document.getElementsByClassName('exp-banner')[0];
document.getElementById('omo').removeEventListener('click', expand, false);
elementFromList.classList.remove('exp-banner');
elementFromList.classList.add('ret-banner');
setTimeout(retract, 3000);
}
document.getElementById('omo').addEventListener('click', expand, false);
</script>
</body>
</html>
sorry but an update
you can still use the *mouseover* event instead of the *click* event if you add/remove the event as I have done with the click event in the alternative versions..
just replace the string *click* with *mouseover* in each ***addEventListener*** and of course the ***removeEventListener***
I am getting to old for this...
Hi,
thank you for your responses. Im afraid i didnt understand very well. Is it mandatory to use IDs for the elements with those codes? because the reason i want to convert my code from "get element by id" into "get element by object" is right because i cant use IDs. Please dont ask me why, because the explanation would get very long. The thing is that all this is PHP generated, so the code i posted is just an excerpt, since it will take forever to post it all. I just need to know if its possible to replace the IDs by the classes.
Thank you.
Hello?? any help please?
With the info that has been provided it it obvious that using classes to replace ID's cannot be done as you do not have any classes to start with...Quote:
Originally Posted by supercain
So the answer would be NO...
if by any chance I am wrong again and you want to replace all the ID.s in the code to classes then yes you can BUT you need to clearer with you explanation because your last request is a bit hazy still...
But i DO have classes:
and the class exp-banner should change into ret-banner on mouse over. I just want to modify the original work from having id="exp-banner" to class="exp-banner" so i can work with classes instead of IDs.Quote:
<div class="exp-banner">
<img src="transparent.png" onmouseover="expand()">
</div>
Thank you.
as I said *with the info given*
and you had ID's in your original request....
the examples I gave had classes instead of IDs.
if you replace ID's with classes you need be aware that changing them in in the HTML part will require changes to the CSS as well..
