GDC Training Portal

Swappable Image


Clicking the image will show more information.Clicking again to return to the original image(Take rC-51-Tabs as an example).

Example Display

Deafult Heading 1
village road road safety solution

Click or tap images for more

Mitigation Measures & Road Safety Solutions

• Speed regulatory and Cautionary/Warning traffic signs (Class B, Type IV) should be installed before the approach of the curve as per Indian Roads Congress’ (IRC) Code of Practice for Road Signs (IRC67:2012).

• Raised Pavement Markers with red reflectors should be installed along both sides the road bend to highlight edges of curved road.

• If embankments are present, Road Delineators more than 1.5m and less than 2.5m in height should be installed to display.


High Intensity Prismatic Reflective Sheeting (Class B, Type IV)

Raised Pavement Markers


How to use?

  • Step

    1. Copy below code in rC-58 or rC-51-Tabs and so on. / 将如下代码复制到DPL的content内,以rC-51为例

    2. Fill the 2 links for swap images. / 修改图片链接,分别为点击前,点击后

    3. Add content if needed. / 按需求添加右边的内容

    4. Alter the whole style if needed. / 按需调整整体样式


.MMM--imageContainer img{width:100%;position:absolute;}
.MMM--imageContainer {
    position: relative;
@media screen and (min-width: 1px) and (max-width: 768px) {
    .Content-right{margin-top: 1.5em;}
    .MMM--imageContainer {margin-bottom: 1em;}
    .js-switchPane1 p{
      padding-top: 12em;
@media screen and (min-width: 768px){
  .content-box {
    position: relative;
    width: 100%;
  .js-switchPane1 {
   float: left;
  .js-switchPane1 p{
    margin-top: 19em;
  .Content-right {
    float: left;
    width: 45%;
    margin-left: 5%;
<div class="content-box">
<div class="js-switchPane1">
  <div class="MMM--imageContainer">
     <!--Fill the link of image before swaping -->
     <img src="#" alt="" class="ContainerImg" title="">
     <!--Fill the link of image after swaping -->
     <img src="#" alt="" class="ContainerImg" style="display: none;" title="">
  <p>Click or tap images for more</p> 
<div class='Content-right'>
<!-- add text content here -->
<div style='clear:both;'></div>
domReady.customInlineMod = function(){