[RESOLVED] Modify className background image attributes?

@JMRKERJul 24.2015

In the style section I can define the position of a specific <li> element (like <li id=”pane0″> ) using
In the <style> section

[code=php] #pane0 {left: 0px; width: 77px; } #pane1 {left: 77px; width: 75px; } #pane2 {left: 152px; width: 70px; } #pane3 {left: 222px; width: 70px; } #pane4 {left: 292px; width: 75px; } [/code]

And I can define different <style> class names to cause the element to display
a different portion of an image within the element using

[code=php] .pane00 a:hover { background: transparent url(‘Faces3x10.gif’) 0px -95px no-repeat; } .pane01 a:hover { background: transparent url(‘Faces3x10.gif’) -77px -95px no-repeat; } .pane02 a:hover { background: transparent url(‘Faces3x10.gif’) -152px -95px no-repeat; } .pane03 a:hover { background: transparent url(‘Faces3x10.gif’) -222px -95px no-repeat; } .pane04 a:hover { background: transparent url(‘Faces3x10.gif’) -292px -95px no-repeat; }

.pane10 a:hover { background: transparent url(‘Faces3x10.gif’) 0px -190px no-repeat; } .pane11 a:hover { background: transparent url(‘Faces3x10.gif’) -77px -190px no-repeat; } .pane12 a:hover { background: transparent url(‘Faces3x10.gif’) -152px -190px no-repeat; } .pane13 a:hover { background: transparent url(‘Faces3x10.gif’) -222px -190px no-repeat; } .pane14 a:hover { background: transparent url(‘Faces3x10.gif’) -292px -190px no-repeat; } [/code]

In the <body> section

[code=php] <ul id=”skyline”> <li id=”pane0″ class=”pane00″><a href=”#0″></a></li> <li id=”pane1″ class=”pane01″><a href=”#1″></a></li> <li id=”pane2″ class=”pane02″><a href=”#2″></a></li> <li id=”pane3″ class=”pane03″><a href=”#3″></a></li> <li id=”pane4″ class=”pane04″><a href=”#4″></a></li> </li> [/code]

Then using javascript I can alter the ‘className’ of the element to show different areas of the main image
when the mouse hovers over the element. ( document.getElementById(‘pane0’).className = ‘pane00’; )
This all works fine.

What I would like to know is:
Is it possible to change the className attribute of the background specifically when the ‘hover’ occurs over the element?
Something like this in JS

[code=php] document.getElementById(‘pane0’).className[‘pane00’].backgroundTop = ‘-95px’; // this does NOT work [/code]

I can’t figure out changing the settings without hard-coding each .pane00 to .pane14 className.
I would like to make the change more dynamic with the use of JS.
?

to post a comment

JavaScript

4 Comments(s) _↴

@iBeZiJul 25.2015 — #I'm not 100% sure what your asking for... But I'll have a shot at answering.

First of all to get that bit of code working you'd have to do something like this

<i>
 </i>document.querySelector('#pane0.pane00').style.backgroundPositionY = '-95px';

As for changing the style of an element when you hover over it dynamically, you can't access pseudo styles directly through JavaScript as far as I can tell. You could have multiple classes for all the different styles you want and just keep changing them as you need them, which it sounds like you're trying to avoid.

Another route (albeit a slightly awkward one) would be to dynamically add and remove style rules as and when you need them, something like this.

<i>
 </i>var style = document.styleSheets[0];
 
 //add rule
 style.addRule('#pane0.pane00 a:hover','background-position-y: -95px');
 
 //get rule index
 var rule = style.cssRules.length-1;
 
 //remove rule
 style.cssRules.deleteRule(rule);

@rtretheweyJul 25.2015 — #I don't think you need or want a JavaScript solution. You can do this with CSS alone. Just remember to use a CSS selector that gives your :hover rule top priority in the styles cascade by making it more "specific". Something like:

<i>
 </i>#skyline li.pane00 a:hover { background-position:0px -95px; }

@jedaisoulJul 25.2015 — #Just a thought: Is it really worth the effort? I.e. Haven't you heard? Mobiles don't have a hover status. ?

@JMRKERauthorJul 26.2015 — #I started out trying to learn more about the background CSS command using JS control.

It looked promising to load only ONE image and show portion of it instead of separate images and numerous class definitions.

After much research and some help from the above posts I came up with the following that uses an array

to show the various portions of the image without using so many CSS classes.

The hover was a nice touch and works OK if using a desktop only with a mouse,

but as 'jedaisoul' noted, there are no hovers with a tablet or smartphone.

So to give a bit more understanding to my initial queries, here is what I used.

Doesn't do much, but does demonstrate the code solution.

[code=php]
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8" />
 <title> Image Positions </title>
 <style>
 #thediv {
 background-color:#FFCC80;
 background-image:url('faces3x10.gif');
 background-repeat:no-repeat;
 height:90px;
 
 width :75px;
 border:1px solid red;
 margin-left:200px;
 }
 </style>
 <script type="text/javascript">
 var posx = '0px', posy = '0px',
 bgImageX = [ '0px', '-77px','-152px','-222px','-292px',
 '-367px','-446px','-514px','-589px','-655px'],
 bgImageY = [ '0px', '-95px','-190px'];
 
 function changePositionX(num) {
 posx = bgImageX[num];
 document.getElementById('thediv').style.backgroundPosition = posx+" "+posy;
 }
 function changePositionY(num) {
 posy = bgImageY[num];
 document.getElementById('thediv').style.backgroundPosition = posx+" "+posy;
 }
 
 function showChoice() {
 var x = bgImageX.indexOf(posx);
 var y = bgImageY.indexOf(posy);  //   alert(x +' : '+ y); 

 document.getElementById('info').innerHTML = 'Click IMAGE for reference: '+x+' : '+y;
 }
 </script>
 </head>
 <body>
 Column: 
 <button onclick = "changePositionX(0)">0</button>
 <button onclick = "changePositionX(1)">1</button>
 <button onclick = "changePositionX(2)">2</button>
 <button onclick = "changePositionX(3)">3</button>
 <button onclick = "changePositionX(4)">4</button>
 <button onclick = "changePositionX(5)">5</button>
 <button onclick = "changePositionX(6)">6</button>
 <button onclick = "changePositionX(7)">7</button>
 <button onclick = "changePositionX(8)">8</button>
 <button onclick = "changePositionX(9)">9</button>
 <p /><div id="thediv" onclick='showChoice()'></div><p />
 Row: 
 <button onclick = "changePositionY(0)">0</button>
 <button onclick = "changePositionY(1)">1</button>
 <button onclick = "changePositionY(2)">2</button>
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 <span id="info">Click IMAGE for reference: </span>
 </body>
 </html>
 [/code]

You will need to change the array positions for any image you might use.

The image I used is attached.

[canned-message]attachments-removed-during-migration[/canned-message]

Also in #JavaScript _↴

saving using ajax Displaying names and numbers newbie JQuery Action

Success!

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

Tweet This

[RESOLVED] Modify className background image attributes?

4 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

[RESOLVED] Modify className background image attributes?

4 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #JavaScript _↴