The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

How do I do these picture codes?

View previous topic View next topic Go down

How do I do these picture codes?

Post by Kamui on March 1st 2016, 12:29 pm

I'd like to know how these two codes work so I can put them on my forum.




Kamui
Forumember

Male Posts : 280
Reputation : 3
Language : English
Location : Greed Island

http://narutogaiden.forumotion.com/

Back to top Go down

Re: How do I do these picture codes?

Post by SLGray on March 1st 2016, 8:15 pm

Please change the title of your topic to something that is related to your question/issue, so that other users will be able to find their question/issue using the search engine.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36641
Reputation : 2441
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Re: How do I do these picture codes?

Post by 10spetter10 on March 1st 2016, 10:28 pm

For your first question I'm gonna post a link to a topic were Ange Tuteur created that kind of widget.
http://help.forumotion.com/t136908-hover-staff-list#924551


For your second question you can try using this html and css:

Code:
<a style="background: transparent url(url to image) no-repeat scroll center center;" href="url to page" class="widget-link"></a>

Code:
.widget-link:hover {
    border-width: 0px 5px;
    filter: grayscale(0);
}
.widget-link {
    width: 150px;
    height: 54px;
    display: block;
    border-width: 0px 2px;
    border-style: solid;
    border-color: green;
    box-sizing: border-box;
    filter: grayscale(1);
    transition: 0.1s;
}

10spetter10
Forumember

Posts : 195
Reputation : 81
Language : Dutch

Back to top Go down

Re: How do I do these picture codes?

Post by Pebbles on March 1st 2016, 11:07 pm

i think the first effect will be created by using the following code, hope this helps

Code:
<div id="staffList">
                                                                                                                                                                                                                                                                                                                                              
   <div id="mainBlock">
<img id="mainImage" src="insert link of image here that you see before you hover the little images like you show up here">                                                                                                                                                                   
   </div>
                                                                                                                                                                                                                                                                                                                                  
   <div id="mainBlock">
                                                                                                          <br>                                                      <br>                                                                                                                                                           
   </div>
                                                                                                                                                                                                                                                                                                                        
   <br><br><br><br><br>
                                                                                                                                                                                                                                                                                                                        
   <div id="staffList">
                                                                                                                                                                  <strong><span style="font-size: 13px;">ADMINISTRATOR</span></strong>                                                                                                                                                           
   </div>
                                                                                                                                                           <a href="/u3358">    <img alt="link of image you want to appear at the top when hovering small image" src="link of the small image"></a><br>

</div>

at line 11, (maybe you need to add more of <br> depending on how big the above image is , to make the other images get in a proper position below the above image)

where it says /u3358, replace that with the links of users profiles on your forum

to add more images/users after this one^^^, all you have to do is repeat the same thing over again = copy this part and add below the first one
Code:
<strong><span style="font-size: 13px;"><span style="text-decoration: underline;">ADMINISTRATOR</span></span></strong>                                                                                                                                                         
  </div>
<a href="/u3358">    <img alt="link of image you want to appear at the top when hovering small image" src="link of the small image"></a>

also you need to add a javascript
Code:
<script type="text/javascript">(function() {
var img = document.getElementById('staffList').getElementsByTagName('IMG'), main = document.getElementById('mainImage'), def = main.src,i;
for (i=0; i<img.length; i++) {
  if (!/mainImage/.test(img[i].id)) {
    img[i].onmouseover = function() { main.src = this.alt }
    img[i].onmouseout = function() { main.src = def }
  }
}
})();</script>
edit; apparently i was too slow lol

Pebbles
New Member

Posts : 11
Reputation : 5
Language : English

Back to top Go down

Re: How do I do these picture codes?

Post by Kamui on March 2nd 2016, 12:48 pm

@pebbles I think the codes you guys gave me isn't compatible with my forum. I have phpBB2

Kamui
Forumember

Male Posts : 280
Reputation : 3
Language : English
Location : Greed Island

http://narutogaiden.forumotion.com/

Back to top Go down

Re: How do I do these picture codes?

Post by Pebbles on March 2nd 2016, 1:45 pm

@Kamui wrote:@pebbles I think the codes you guys gave me isn't compatible with my forum. I have phpBB2
do you know where to add the javascript? its at modules and then Javascript codes management

and just try and add the above in a new widget

Pebbles
New Member

Posts : 11
Reputation : 5
Language : English

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum