WolfLord
Hey guys im wondering if you can help me out. I'm trying to find a way to make the images i use for my floating nav bar change to a different image when you hover over each one. Anyone know an easy way to accomplish this? Preferably via CSS so i dont have to replace the code on every page (my nav bar is in the form of code on each individual page) but if i do have to that would be a big deal.
Here is the code i use on each page for the nav bar:
@
"!http://i1233.photobucket.com/albums/ff386/danbadour/Alexander_Civ5_zps00d58e58.png!":https://heroes-of-hellas.obsidianportal.com/
"!http://cdn.obsidianportal.com/assets/28871/SB_Story.png!":https://heroes-of-hellas.obsidianportal.com/wikis/story
"!http://cdn.obsidianportal.com/assets/28867/SB_People.png!":https://heroes-of-hellas.obsidianportal.com/wikis/people
"!http://cdn.obsidianportal.com/assets/28868/SB_Places.png!":https://heroes-of-hellas.obsidianportal.com/wikis/places
"!http://cdn.obsidianportal.com/assets/28869/SB_Factions.png!":https://heroes-of-hellas.obsidianportal.com/wikis/factions
"!http://cdn.obsidianportal.com/assets/28870/SB_Rules.png!":https://heroes-of-hellas.obsidianportal.com/wikis/rules
"!http://cdn.obsidianportal.com/assets/28872/SB_Miscellany.png!":https://heroes-of-hellas.obsidianportal.com/wikis/miscellany
"!http://i1233.photobucket.com/albums/ff386/danbadour/Trireme_Civ5_zps3fc18ebb.png!"://heroes-of-hellas.obsidianportal.com/
@
"Age of Heroes":https://heroes-of-hellas.obsidianportal.com/
"Avatar: Conquest of the Imperial Order":https://avatar_adventures.obsidianportal.com/
"COTM November 2011":http://blog.obsidianportal.com/november-11-campaign-of-the-month-avatar-conquest-of-the-imperial-order/?utm_source=rss&utm_medium=rss&utm_campaign=november-11-campaign-of-the-month-avatar-conquest-of-the-imperial-order
Comments
DM, Current Campaign: The Godlands: Rise of the Blood Moon Kings
DM, Previous Campaign: Avatar: Conquest of the Imperial Order - CotM: November 2011
DM, Current Campaign: The Godlands: Rise of the Blood Moon Kings
DM, Previous Campaign: Avatar: Conquest of the Imperial Order - CotM: November 2011
@.overtext {position:absolute;top:34%;left:0px;text-align:center;font-size:large;font-weight:bold;text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black, 0px 0px 4px black;width:220px;color:SkyBlue;}
.overtext:hover {color:yellow;}@
Makes the letters change color on my main wiki page.
"Alfaysia":https://alfaysia.obsidianportal.com/wikis/main-page
And this is the code on the page...
@
CHARACTERS
MAGIC
LIFE IN ALFAYSIA
REGIONS AND GEOGRAPHY
POWERS AND DEITIES
COSMOLOGY
HISTORY
ORGANIZATIONS
RUNNING THE GAME
MONSTERS AND CREATURES
MAPS
TABLES AND RULES
@
Unconquered Kingdoms, July 2016 CotM
DM, Current Campaign: The Godlands: Rise of the Blood Moon Kings
DM, Previous Campaign: Avatar: Conquest of the Imperial Order - CotM: November 2011
Personally, I 'm not sure how to accomplish that.
Unconquered Kingdoms, July 2016 CotM
The issue I note right away with respects to your copy/pasted code is that there are no "class" identifiers for your divs or images, which makes targeting them via CSS to provide rollover effects significantly more difficult. Off the top of my head, I don't see any attributes that you can select off of in your code block, so I'm going to assume you'll end up having to edit your per-page code to add them, and if you're going to do that, you might as well just add classes and make life that much easier on yourself.
- Kallak
That code is suggested by Wolfhound at "Dresden Files Dallas":https://dfd.obsidianportal.com/wikis/main-page tutorials and was tweaked to my use as best I could.
I have learned enough coding to understand what you are saying about identifiers, but not enough to implement it myself.
And I continue to admire "DANgerous Kalamar 4":https://dangerous-kalamar-4.obsidianportal.com/ as a fantastic job of world info and background. Its been on my fav list since the beginning.
Unconquered Kingdoms, July 2016 CotM
Thanks for the positive feedback, it is much appreciated. I still have to fix some things, add the final log entry and start gearing up for Kalamar 5, but my current work schedule is causing some issues ATM. That said, the code you posted for text hovers works just fine, but unfortunately for TolsimirWolfblood, his sidebar uses images of text rather than text, which is why the hover coloration/"Tribox" setup you posted won't work for him. Fixing his issue isn't difficult, as all one would need to do is add classes to target with, but if he does that, he'll have to go into every page on his site and make the alterations over and over again - which I assume he's hoping to avoid (and with good reason, I've done it before, it sucks).
Sadly, unless there's some method for styling images via the "src" attribute that I'm presently unaware of, I think he has no alternative.
- Kallak
DM, Current Campaign: The Godlands: Rise of the Blood Moon Kings
DM, Previous Campaign: Avatar: Conquest of the Imperial Order - CotM: November 2011
Or
@img[src*="example"]@
Need to work in a :hover pseudo-selector.
Haven't fiddled with it at all, so some troubleshooting required, no doubt.
1) GRADIENT BACKGROUNDS
Okay, so this is a pain in the arse. For each image you want to have a bronze glow effect, copy this code:
@.campaign-public-layout img[src*="image.ext"]:hover {background: radial-gradient(center, ellipse cover, goldenrod 0%, transparent 75%); background: -moz-radial-gradient(center, ellipse cover, goldenrod 0%, transparent 75%); background: -webkit-gradient(radial, center center, 0px, center center, 75%, color-stop(0%,goldenrod), color-stop(75%,transparent)); background: -webkit-radial-gradient(center, ellipse cover, goldenrod 0%,transparent 75%); background: -o-radial-gradient(center, ellipse cover, goldenrod 0%,transparent 75%); background: -ms-radial-gradient(center, ellipse cover, goldenrod 0%,transparent 75%);}@
Replace "image.ext" with a portion of the image source URL that is unique. In your case, something like "28871/SB_Story.png".
I've used a gradient to give a nice soft-edged background. You must have the various browser specific background settings for the gradients, because nobody is using the W3C standard yet. Search and replace "goldenrod" to change the color at the center, and fiddle with the "75%" to change how large the glow is - just note that 100% will look weird because it fills to corners, not edges.
2) BRONZED IMAGES
Alternatively, you could create "bronzed" versions of each image with a yellowed glow and do something like:
@.campaign-public-layout img[src*="image.ext"]:hover {background-image: url("image_bronzeglow.ext");}@
Which will make a bronze glow pop under each image on hover. As before, replace "image.ext" and "image_bronzeglow.ext" with URLs for your own images. This will look better and have cleaner code than the first option, but does require creating a second copy of each image.
I played with the z-index but wasn't able to get anything to "pop over".
EDIT: That may be the worst explanation ever given, so let me know if you need clarification on something.
DM, Current Campaign: The Godlands: Rise of the Blood Moon Kings
DM, Previous Campaign: Avatar: Conquest of the Imperial Order - CotM: November 2011
DM, Current Campaign: The Godlands: Rise of the Blood Moon Kings
DM, Previous Campaign: Avatar: Conquest of the Imperial Order - CotM: November 2011
DM, Current Campaign: The Godlands: Rise of the Blood Moon Kings
DM, Previous Campaign: Avatar: Conquest of the Imperial Order - CotM: November 2011
I had not considered the use of "src*" as opposed to just "src" for attribute selection, well done. Noted for future reference.
- Kallak
I stole the code from Thorvaldr, and he has a tutorial "HERE":https://tyellador.obsidianportal.com/wikis/races-page-effect
If I am wrong in what you are looking for, sorry. I am still learning this stuff.
"PhoenixMark":http://www.obsidianportal.com/profile/PhoenixMark
"CRIMSON SKIES":http://www.obsidianportal.com/campaigns/crimson-skies
"COTM June 2012":http://blog.obsidianportal.com/crimson-skies-junes-campaign-of-the-month/
Also "Sactown Blues":http://www.obsidianportal.com/campaigns/sactown-blues
DM, Current Campaign: The Godlands: Rise of the Blood Moon Kings
DM, Previous Campaign: Avatar: Conquest of the Imperial Order - CotM: November 2011