I’m attempting to create a rollover effect (using Squarespace). I would like to replace the existing image with another image. Someone on the squarespace answers forum told me I needed to use JavaScript in order to change the HTML in order to do this. Can someone help?
The page I would like rollover effects on is:
BrysonPrice.com/contact (rollover effect under “Connect” images)
Thanks for your help!
Give the image a unique ID (something that no other element on that page uses), and then give it onmouseover and onmouseout attributes that will change the src attribute, for each.
Pseudo-code example.
<img id="uniqueID" src="/path/to/normal.gif" onmouseover="this.src='/path/to/overstate.gif';" onmouseout="this.src='/path/to/normal.gif';" />
HTH,
PS. It might be also helpful to pre-load both images, so the user won’t have to wait for the overstate.gif file to download on the first mouseover event.
PPS. I was going to give a more complex idea, using the DOM to add the event handlers, hence the unique ID; but this example doesn’t require it.
Of course it does - you should never jumble JavaScript and HTML together - it makes the page much harder to maintain.
With the following in a separate file attached to the bottom of the page the JavaScript is kept completely separate from the HTML so that those without JavaScript don’t need to load it, it can be used on multiple pages without having to copy all the code and it doesn’t make the HTML harder to read by including another language with it.
var d = document.getElementById('uniqueID');
d.onmouseover = function() {d.src='/path/to/overstate.gif';};
d.onmouseout = function() {d.src='/path/to/normal.gif';};
So now the HTML just reads
<img id="uniqueID" src="/path/to/normal.gif">
Slightly more code but way more flexible.
Perhaps. However, considering that the OP asked a question that is a very rudimentary (JavaScript 101, if you will) question, I’m assuming that the OP isn’t all that versed in HTML or JavaScript, so wanted to keep it as simple as possible.
V/r,
All the more reason for showing the correct way to do it so that they don’t start learning the wrong thing and have to spend longer unlearning things later.
JavaScript and HTML should never be jumbled together (unless the main browser you need to support is Netscape 4 and earlier)
Not really. Squarespace is a site builder. I didn’t answer because I wasn’t sure if he was even allowed to use his own JS or how it was implemented because I’ve never dealt with it before. @WolfShade’s answer will work whether it is restricted or not, because I know they can use HTML.
If it is restricted to not allow JavaScript then the JavaScript will not work even if it is jumbled with the HTML - as it is still JavaScript.
See http://www.html5rocks.com/en/tutorials/security/content-security-policy/ for the simplest way that sites can control what is allowed to run - it is easier to block inline JavaScript than it is to block external scripts.
In fact lots of sites block inline scripts as a security measure and expect all scripts to be external (where injecting code is more difficult).
“restricted” doesn’t mean “disabled”
There could be a million different ways that they allow it. I really have no idea how Squarespace works. I’ve never signed up for an account.
But based on past experiences, site builders do weird and crazy stuff that doesn’t necessarily make sense from a developer’s standpoint, but make a ton of sense from keeping an easy interface to make good looking end products.
Wouldn’t it be better to use CSS instead for rollovers?
#uniqueID:hover {
background: url("http://…");
}
The only thing that I can think of would be “does CSS have the ability to pre-load the images?” It isn’t critical, but seems like it would be a slightly happier user experience if the second image doesn’t have to download on the first mouseover.
V/r,
I was told on the Squarespace forums that it isn’t possible to use CSS for rollover “image swapping” so I thought it couldn’t be done.
Where would I post this on SquareSpace? There are 2 areas to paste code:
With that kind of effect, a sprite image should be used, so that the rollover effect is already loaded.
As long as you can write CSS, it can be done—even if, at a pinch, you add the image as a data uri within the style sheet itself.
How can I do this?
Preloading images in CSS is possible if the element in question has it set. Now, if you set it on a hover rule, then no it won’t get preloaded until it gets called.
You can get around this by just setting like a -999px background position and reset it to 0 on hover. That way it is preloaded for you.
Depends on the situation.
Here’s a simple demo:
That hover effect is done purely with CSS, with no image in the HTML, no images to upload anywhere, no preloading issues etc. … and of course no JS. Normally you wouldn’t use a data url for this, but rather just store the image in your images folder. This is just to show how to do it via CSS only.
I just created this simple sprite image as a demo:
You can turn it into a data uri in various ways. I just dragged the image into a new tab in Chrome, then right-clicked on the image > inspect element > open Resources panel > open the image in the resources panel > right click on image and select “copy image as a data url”.
However, you might find it easier to use tools like this:
Thanks for providing this info
Also, ideally you are combining your images into sprites so all the images are downloaded onto one file. So you shouldn’t have to worry about preload since as long as you have one image being used, all of the file will be used.
I keep saying I’ll do it for my website but I’m just so lazy.
I don’t think it makes a ton of difference, unless you have an individual file for every little icon. Now we have stuff like Font-Awesome that just makes all that moot and so much better.
Not a ton of difference, sure, but it really helps lower the HTTP requests, and it would solve any preloading issues.
