/    Sign up×
Community /Pin to ProfileBookmark

Image Swap Trouble

[code=html]

feed = new Image();
feed.src = “images/feed.png”;
feedover = new Image();
feedover.src = “images/feedover.png”;

email = new Image();
email.src = “images/email.png”;
emailover = new Image();
emailover.src = “images/emailover.png”;

technorati = new Image();
technorati.src = “images/technorati.png”;
technoratiover = new Image();
technoratiover.src = “images/technoratiover.png”;

mbl = new Image();
mbl.src = “images/mbl.png”;
mblover = new Image();
mblover.src = “images/mblover.png”;

function synOVER(img) {
if(img == feed) {
document.getElementById(‘rss’).style.backgroundImage = “url(“+feed+”)”;
} else if (img == email) {
document.getElemetnById(’email’).style.backgroundImage = “url(“+emailover+”)”;
} else if (img == technorati) {
document.getElementById(‘tech’).style.backgroundImage = “url(“+technoratiover+”)”;
} else {
document.getElementById(‘mbl’).style.backgroundImage = “url(“+mblover+”)”;
}
}

function synOUT(img) {
if(img == feed) {
document.getElementById(‘rss’).style.backgroundImage = “url(“+feed+”)”;
} else if (img == email) {
document.getElemetnById(’email’).style.backgroundImage = “url(“+email+”)”;
} else if (img == technorati) {
document.getElementById(‘tech’).style.backgroundImage = “url(“+technorati+”)”;
} else {
document.getElementById(‘mbl’).style.backgroundImage = “url(“+mbl+”)”;
}
}

[/code]

This doesn’t throw errors, but it doesn’t work either. I’ve ensured that all of the HTML is correct, I just need help with the JS please and thanks.

to post a comment
JavaScript

4 Comments(s)

Copy linkTweet thisAlerts:
@FangOct 18.2007 — A guess without knowing what is passed:function synOVER(img) {
if(img[COLOR="Green"].src[/COLOR] == feed[COLOR="Green"].src[/COLOR]) {
document.getElementById('rss').style.backgroundImage = "url("+feed[COLOR="Green"].src[/COLOR]+")";

Can be done with css: http://www.tanfa.co.uk/css/examples/rollover-images-no-preload.asp
Copy linkTweet thisAlerts:
@HeliozentricauthorOct 18.2007 — feed, feedover and all of those variables are defined above, with the preload.
Copy linkTweet thisAlerts:
@HeliozentricauthorOct 18.2007 — [code=html]

<script>

feed = new Image();
feed.src = "http://www.srcoley.com/wp-content/themes/coleyscorner/images/feed.png";
feedover = new Image();
feedover.src = "http://www.srcoley.com/wp-content/themes/coleyscorner/images/feedover.png";

email = new Image();
email.src = "http://www.srcoley.com/wp-content/themes/coleyscorner/images/email.png";
emailover = new Image();
emailover.src = "http://www.srcoley.com/wp-content/themes/coleyscorner/images/emailover.png";

technorati = new Image();
technorati.src = "http://www.srcoley.com/wp-content/themes/coleyscorner/images/technorati.png";
technoratiover = new Image();
technoratiover.src = "http://www.srcoley.com/wp-content/themes/coleyscorner/images/technoratiover.png";

function synSWP(which,image) {
if (which == "rss") {
document.getElementById('rss').style.backgroundImage = "url"+"('"+image+"')";
} else if (which == "email") {
document.getElementById('email').style.backgroundImage = "url"+"('"+image+"')";
} else {
document.getElementById('tech').style.backgroundImage = "url"+"('"+image+"')";
}
}

</script>

[/code]


This is the solution. For some reason it wanted the full url. Oh well I narrowed two functions into one and all is well.
Copy linkTweet thisAlerts:
@ZnupiOct 18.2007 — That was the solution I was going to point out. But please try to use pure-css rollovers... They're a big hard to get a hang of at first but you'll see they're much better.. No preloading and you use half the number of images you're using now ?... Just google "CSS Rollover" ? (here's an [URL=http://www.wellstyled.com/css-nopreload-rollovers.html]example[/URL])
×

Success!

Help @Heliozentric spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.21,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...