The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

How do I do these picture codes?

4 posters

Go down

How do I do these picture codes? Empty How do I do these picture codes?

Post by Kamui Tue 1 Mar - 12:29

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

How do I do these picture codes? Ec41016b360bf3a7c40c7d6f627ecb09

How do I do these picture codes? 3bfad427f2630611675dd1d34a4cfb15
Kamui
Kamui
Forumember

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

http://narutogaiden.forumotion.com/

Back to top Go down

How do I do these picture codes? Empty Re: How do I do these picture codes?

Post by SLGray Tue 1 Mar - 20:15

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.


How do I do these picture codes? Slgray10

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

Male Posts : 51464
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

How do I do these picture codes? Empty Re: How do I do these picture codes?

Post by 10spetter10 Tue 1 Mar - 22:28

For your first question I'm gonna post a link to a topic were Ange Tuteur created that kind of widget.
https://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
10spetter10
Forumember

Posts : 195
Reputation : 82
Language : Dutch

Back to top Go down

How do I do these picture codes? Empty Re: How do I do these picture codes?

Post by Pebbles Tue 1 Mar - 23:07

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
Pebbles
New Member

Posts : 11
Reputation : 5
Language : English

Back to top Go down

How do I do these picture codes? Empty Re: How do I do these picture codes?

Post by Kamui Wed 2 Mar - 12:48

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

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

http://narutogaiden.forumotion.com/

Back to top Go down

How do I do these picture codes? Empty Re: How do I do these picture codes?

Post by Pebbles Wed 2 Mar - 13:45

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
Pebbles
New Member

Posts : 11
Reputation : 5
Language : English

Back to top Go down

Back to top


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