Help how to turn an image into a tab???

[cherub.]

basically what what the title says.
thanks!

 

[Alteras]

Do you want the accordion method or the new bbcode+ method?

 

[vliamint]

Do you want to do it in bbcode script? Or with the basic tabs code?

 

[cherub.]

Do you want to do it in bbcode script? Or with the basic tabs code?

Do you want the accordion method or the new bbcode+ method?

in bbcode+ script please~

like.. kind of what i want is a picture in the middle, and that picture takes you to a different place in the code.
you understand???

 

[cherub.]

heres the code if you need it!

Spoiler: code!

[div=height:385px;width:490px;background:#CEBB9A;margin:auto;center;][div=height:210px;width:210px;background:#A93421;position:relative;top:60px;left:130px;border:1px solid #8e2818;][img]http://i64.tinypic.com/29vmf76.png[/img]
[color=#8e2818][div=face:Trebuchet MS;font-size:22px;][b]you attack my heart ![/b][/div]

 

[vliamint]

in bbcode+ script please~

like.. kind of what i want is a picture in the middle, and that picture takes you to a different place in the code.
you understand???

You don't use classes, so you might have to learn that side of things too in order for the script to work properly. The first spoiler is a default sort of code (that I don't really use now) but it's a very basic example I got when bbcode+ was first released. The second spoiler is how I do 'tabs'. It's actually just making things appear/disappear rather than actual tabs (like the first spoiler). The second one is a bit more complicated if you're new to scripts because it uses transitions, but it's simple once you get the hang of it.

Spoiler: code

[nobr]
[class=main]
  width: 400px;
  height: 400px;
  background-color: white
  margin: auto;
  overflow: hidden;
  border: solid 1px black;
[/class]

[class=first]
  height: 20px;
  width: 100px;
  margin: 10px;
  background-color: #A7A7A7
  cursor: pointer;
[/class]

[class=second]
  height: 20px;
  width: 100px;
  margin: 10px;
  background-color: #F2F2F2
  cursor: pointer;
[/class]

[class=third]
  height: 20px;
  width: 100px;
  margin: 10px;
  background-color: #DCDCDC
  cursor: pointer;
[/class]

[class=content]
  box-sizing: border-box;
  text-align: justify;
[/class]

[class=title]
  font-size: 14px;
  text-align: center;
  color: black;
  cursor: pointer;
  margin: auto;
  pointer-events: none;
[/class]

[comment]Make a new class for your image (the size, margin etc. if you don't resize the image manually, it will have the 'click to show larger image' and if you try get rid of that with pointer-events: none, it will break the tab, so I suggest - within this class - using |   background-image: url('imagecode'); background-size: cover; background-position: center center;    | and it will resize the image to the height/width).[/comment] 

[class=para]
  font-size: 10px;
  text-align: justify;
  padding: 5px;
  color: black;

[class=hidden]
  display: none;
[/class]

[script class=first on=click]
  hide content
  set link (getText)
  if (eq "${link}" "1") (show content1)
[/script]

[script class=second on=click]
  hide content
  set link (getText)
  if (eq "${link}" "2") (show content2)
[/script]

[script class=third on=click]
    hide content
    set link (getText)
    if (eq "${link}" "3") (show content3)
[/script]

[div class=main]
    [div class=first]
      [div class=hidden]1[/div]
      [div class=title][fa]fa-user[/fa][/div]   [comment]Instead of doing div class=title, use the image class and replace the fa-icon with your image code (or like I said above, just do background-image: url within the class and you don't need to put the image code here[/comment] 
    [/div]

    [div class=second]
      [div class=hidden]2[/div]
      [div class=title][fa]fa-heart[/fa][/div]
    [/div]

    [div class=third]
      [div class=hidden]3[/div]
      [div class=title][fa]fa-star[/fa][/div]
    [/div]

  [div class="content content1"]
      [div class=para]this is your first tab[/div]
    [/div]

  [div class="content content2 hidden"]
      [div class=para]this is your second tab[/div]
    [/div]

  [div class="content content3 hidden"]
      [div class=para]this is your third tab[/div]
    [/div]
[/div]
[/nobr]

Spoiler: code2

[nobr]
[class=container]
  height: 385px; 
  width: 490px; 
  margin: auto; 
  background-color: #CEBB9A;
[/class]

[comment]vvv this is your tab image vvv[/comment]

[class=img]
  height: 210px; 
  width: 210px; 
  position: absolute; 
  background-image: url('http://i64.tinypic.com/29vmf76.png'); 
  background-position: center center; 
  background-size: cover; 
  margin-left: 140px; 
  margin-top: 75px; 
[/class]
[comment]margin-left/top is so that the image is in the center. i think you could just do margin: auto and take out position: absolute, but i don't really understand how positioning works very well so i just stick to manually centering stuff.[/comment]


[comment] vvv this is what will show when you click on the image! vvv[/comment]
[class=content1]
  height: 385px; 
  width: 490px; 
  position: absolute; 
  background-color: transparent; 
  margin-top: 300px; 
  transition: 1s; 
  opacity: 0;
[/class]

[class=text]
  font-size: 22px; 
  font-family: 'Trebuchet MS' , sans-serif; 
  color: #8e2818; 
  text-align: center; 
[/class]

[comment]vvv this is that transition to make your text appear vvv[/comment]
[class=show]
  opacity: 1; 
  transition: 1s; 
[/class]

[comment]vvv this is the script to make it work vvv[/comment]
[script class=img]
    set img 0
[/script]

[script class=img on=click]
    if (eq ${img} 0) (addClass "show" "content1") (removeClass "show" "content1")
    if (eq ${img} 1) (set img 0) (set img 1)
[/script]

[comment]vvv your visible divs vvv[/comment]
[div class=container]
  [div class=img][/div]
  [div class=content1]
    [div class=text]you attack my heart ![/div][/div]
[/div]
[/nobr]

With that second one, you can obviously change all the classes and rearrange them. Sorry, I'm really bad at actually explaining so I hope you can sort of figure it out from the code.. if you can't or it's too difficult to unpick it, I'm happy to try and work it through bit by bit with you.

 

[Alteras]

Looking at the code you provided, i would like to know where you want the text to show up. The code that wonhae provided is great for tabs, but can be considered overkill if all you're doing is showing a single box of text and then hiding it.

 

[cherub.]

i want the text to...
like you know how a tab goes to a different page of text or something??
i want you to make the image slide or something?? to a different page.
if thats not possible, then just make the text appear under it in an overflow text box !

 

[Alteras]

what you probably want to do is have your text behind the image, so you can use some position absolute trickery. the code would probably be something

[script class=container on=click]
slideToggle image
[/script]

where the container is the div holding both the image and the text.

 

[cherub.]

okay, one concern is that the code that wonhae gave me was kind of confusing...
i have no almost experience in bbcode+

 

[Lyro]

okay, one concern is that the code that wonhae gave me was kind of confusing...
i have no almost experience in bbcode+

I strongly recommend reading through the BBCode+ guide if you are going to make use of BBCode+ code.

I also recommend reading CSS and JavaScript tutorials online to get a better grasp of what BBCode+ makes possible, and how.

 

[cherub.]

I strongly recommend reading through the BBCode+ guide if you are going to make use of BBCode+ code.

I also recommend reading CSS and JavaScript tutorials online to get a better grasp of what BBCode+ makes possible, and how.

alright.