Attention:

Support Rules and Guidelines
Before you post your support topic, please remember to:
  • Read the support forum rules.
  • Check the wiki and use search to see if your problem can be answered there first.
  • Link your board please, and make sure that the problem on your board is visible to guests or provide a test account.
  • Do not post Board Wrappers and CSS unless requested. With a board link, this is not necessary.
  • Be as descriptive as you can and use as many details as possible when describing your problem.
  • Please briefly mark any links to forums that may not be work-safe.
This will help ensure your support issue will be attended to in a quick and efficient manner.

  Add ReplyNew TopicNew Poll

 Link images change?
#
Hello!

So on the forums I use, I have a decorative image for each forum in black and white.

user posted image

I have two questions. One, is it possible to make the image part of the link (meaning, clicking on the image would be the same as clicking on the sub forum title) and two, is it possible to make it so that when the cursor hovers over the black and white linked image, it changes to a colored version of the same button? (See example below.) Thank you!

user posted image
PM
#
You can easily make the image clickable; but if you want to replace the link entirely it's just slightly trickier. As for the hover, yes, should be possible as well with css/javascript. Moving to support as this is more suited there. A link to your board is needed really to help further.

signature
email: admin@jcink.com :: blog: John C.
#
Moved to JFB Support, please post topics like this here next time. Thanks. smile.gif

signature
email: admin@jcink.com :: blog: John C.
#
+Here is a link to my board!

I would love to learn how to make the image clickable - the link doesn't have to change from the link to the sub forum! smile.gif

And if anyone can give me some sample script on how to change the hover image? ohmy.gif
PM
#
In terms of making the links clickable I believe you will have to do this manually (one by one).

Do you have a link to the images with colour or are you hoping to do this with CSS? I think you can with some browsers, but a coloured image would really be the best option.

This post has been edited by owl: Aug 2 2014, 01:02 PM

signature
Kindly do not contact me on Discord or PM me for support.

user posted image
#
As an example of making the images clickable, here's how you do it.

In the board desc you have:

CODE
<img src="http://i1176.photobucket.com/albums/x336/glasspearls/SOLEMNIBUS%20-%20Forum%20Buttons/rulesstorystaffinquiries_zps74187b5d.png">


For this forum, change that code to this:

CODE
<a href='http://solemnibus.jcink.net/index.php?showforum=3'><img src="http://i1176.photobucket.com/albums/x336/glasspearls/SOLEMNIBUS%20-%20Forum%20Buttons/rulesstorystaffinquiries_zps74187b5d.png"></a>


What did I do? I simply clicked on the forum link, and put the results in between the "a href" or link tag. <a href='forum link here'>(image html)</a> is basically what I'm doing.

Let me know if this seems unclear.

signature
email: admin@jcink.com :: blog: John C.
#
John, perfect, that clears it up perfectly!

owl, I do have colored images saved! Just a colored version of each button. Is there a way to make the black and white one change into the colored image when it is hovered over? (The image will be a link as well)
PM
#
Any chance of getting this answered still?
PM
#
QUOTE
Is there a way to make the black and white one change into the colored image when it is hovered over? (The image will be a link as well)


There is. Can you provide the image links for hover/non hover and I'll make an example?

signature
email: admin@jcink.com :: blog: John C.
#
Yes!

This is the image as I would like it to appear normally: http://i.imgur.com/oJ40ejf.png


And this is the image i would like to appear when the image is hovered over: http://i.imgur.com/vhRNesl.png
PM
#
Add this to your CSS:

CODE
img.grayscale {
   filter: url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale");
   filter: gray;
   -webkit-filter: grayscale(100%);
}
img.grayscale:hover {
   filter: url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale");
   -webkit-filter: grayscale(0%);
}


And use this for the image (use the coloured image and just change the image for each entry):
CODE
<div class="grayscale"><a href="link here><img src="http://i.imgur.com/vhRNesl.png"></a></div>


This post has been edited by owl: Aug 8 2014, 03:12 PM

signature
Kindly do not contact me on Discord or PM me for support.

user posted image
#
For some reason, I can't get this to work - I've put the code into the CSS stylesheet (I just stuck it in under Link Colors, unless there was some specific place I'm supposed to put it?) and I put the the smaller line of code into the sub forum description box. (I assume this is where it goes?) Very simply, nothing shows up in the forum when I put it there. It's just a blank space.
PM
#
    What browser are you using?

    Most CSS filters only work in Chrome, and limited in Firefox. It's not a cross-browser compatible feature just yet.
PM
#
Oh, I see! Yeah, i'm only using Safari at the moment. So maybe this is a no go sad.gif
PM
#
Nope, you can still do it, it just has to be more manual. The first thing you're going to do is name each images container (it's going to be a div) differently. Let me show you what I mean. For the first image we'll do:

<div class="divname1" style="width: 500px; height: 100px; margin: 0 auto"></div>

Put that where you want the first image. For the second add the following and repeat.

<div class="divname2" style="width: 500px; height: 100px; margin: 0 auto"></div>

Etc. Do that until you have that for each image you want. Then take the image you usually want to appear, and add this:

.divname1 {background: url('http://imgur.com/oJ40ejf'}

That should make the image you want for the background. Then add this to the CSS under it:

.divname1:hover {background: url('http://imgur.com/vhRNesl'}

Do that for each one and it should give you the result you're looking for. Let me know how it turns out! ^^ If you cannot make it work, list all the images with their pairs and someone should be able to throw this together for you.

This post has been edited by owl: Aug 9 2014, 10:55 PM

signature
Kindly do not contact me on Discord or PM me for support.

user posted image
0 User(s) are reading this topic (0 Guests and 0 Anonymous Users)
0 Members:
Share this topic:
« Next Oldest | General Support | Next Newest »

Options Add ReplyNew TopicNew Poll